在Vue.js項目的開發和部署過程中，配置打包路徑和路由模式是兩個至關重要的環節。下面，我們將詳細探討如何根據需求將Vue項目打包部署到域名的根路徑或二級路徑，并深入解析hash路由與history路由的配置方法。

一、Vue項目打包部署

1. 配置vue.config.js

vue.config.js是Vue CLI項目的配置文件，用于定制項目構建過程中的各種選項。其中，publicPath屬性決定了打包后靜態資源的路徑前綴。

• 部署到根路徑：如果希望將Vue項目部署到域名的根路徑（如https://yourdomain.com/），則應將publicPath設置為'/'（這是默認值，通常無需顯式設置）。

module.exports = {
  publicPath: '/' // 默認值，無需顯式設置
};

• 部署到二級路徑：如果希望將Vue項目部署到域名的二級路徑（如https://yourdomain.com/cms/），則應將publicPath設置為對應的路徑（如'/cms/'）。

module.exports = {
  publicPath: '/cms/'
};

2. 打包與部署

在配置好vue.config.js后，使用npm run build命令進行打包。打包完成后，會在項目根目錄下生成一個dist文件夾，里面包含了所有靜態資源文件。將這些文件上傳至服務器上的指定目錄，并根據服務器類型（如Nginx、Apache等）進行相應的配置。

3. 服務器配置示例（Nginx）

以Nginx為例，下面展示了如何為Vue項目配置Nginx以支持根路徑和二級路徑的部署。

• 根路徑部署：

server {
  listen 80;
  server_name yourdomain.com;

  location / {
    root /path/to/your/vue/dist;
    try_files $uri $uri/ /index.html; # 捕獲所有路由，并返回index.html
  }
}

• 二級路徑部署：

server {
  listen 80;
  server_name yourdomain.com;

  location /cms {
    alias /path/to/your/vue/dist; # 注意是alias，不是root
    try_files $uri $uri/ /cms/index.html; # 捕獲所有/cms/開頭的路由，并返回/cms/index.html
  }
}

二、Vue路由配置

1. hash路由

hash路由是Vue Router的默認模式，它通過URL中的#符號來表示路由路徑。這種模式下，頁面刷新時不會導致404錯誤，因為服務器會將所有請求都重定向到index.html（前提是服務器已正確配置）。

配置方法：在Vue Router的配置中，無需顯式設置mode屬性（或將其設置為'hash'），即可使用hash路由。

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';

Vue.use(Router);

export default new Router({
  // mode: 'hash', // 可選，因為'hash'是默認值
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    // 其他路由配置...
  ]
});

2. history路由

history路由使用瀏覽器的History API來修改URL，而不帶#符號。這種模式下，頁面刷新時需要服務器能夠正確處理前端路由，否則會導致404錯誤。

• 配置方法：在Vue Router的配置中，將mode屬性設置為'history'，并根據項目部署路徑設置base屬性（如果部署在根路徑，則無需設置base）。

export default new Router({
  mode: 'history',
  // base: '/cms', // 如果部署在二級路徑，則設置該屬性為對應的路徑
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    // 其他路由配置...
  ]
});

• 服務器配置：使用history路由時，必須確保服務器能夠捕獲所有前端路由請求，并將它們重定向到index.html（或對應的入口文件）。這通常通過服務器的重寫規則或代理配置來實現。

總結

通過合理配置vue.config.js和Vue Router，以及正確設置服務器端的代理規則，你可以輕松地將Vue應用部署到域名的根路徑或二級路徑，并自由選擇使用hash路由或history路由。

在配置過程中，務必注意服務器端的支持情況，以確保前端路由能夠正常工作。希望這篇深度解析能夠幫助你更好地理解和配置Vue項目的部署和路由。