修改vue的配置項支持生產環境下二級目錄訪問的方法

本文主要記錄如何配置vue的打包文件配置項，使打包后的文件可以支持二級目錄的訪問。

1、常規打包

在實際的項目中，我們通常都使用 npm run build 直接打包文件后丟到服務器上訪問
打包后的文件目錄是這樣的：

訪問的靜態資源都是地址是這樣的：

我們現在要放在服務器的二級目錄下訪問地址，那么訪問的路徑就應該也加上二級目錄，該如何配置尼？

2、靜態文件地址修改

靜態文件的訪問地址應該加上二級目錄前綴：

方法：找到項目的打包配置文件index.js，對參數assetsPublicPath進行配置：

解釋一下：

• assetsPublicPath： 是webpack打包后的文件訪問的靜態資源路徑的根路徑，如果我們想在訪問的域名后加入二級目錄，那么就要在這里進行配置了。
• process.argv：是node的全局變量，我們在執行npm run build 其實真實的命令行是node build/build.js！process.argv指的就是node命令行后的參數，argv是一個數組，第一個參數是process.execPath，第二個參數是當前執行的js文件路徑，第三個參數開始指向我們在命名行后面加的參數了。

因此我們這樣執行命令進行打包就可以了：

如此，node就可以獲取到process.argv[2]是hmy了，那么靜態資源的路徑就可以是/hmy了。

3、接口地址修改

除了修改靜態文件的路徑，我們還要修改接口請求地址的路徑，我們知道在vue的業務代碼中可以通過process.env來獲取全局配置對象區分生產環境和開發環境，因此我們可以將相應的配置放在對應的配置文件中。

方法：找到項目的打包生產環境的配置文件prod.env.js

'use strict'
let url = (process.argv[2] && process.argv[2] == 'hmy') ? 'hmy' : '';

module.exports = {
  NODE_ENV: '"production"',
  URL: '"' + url + '"'
}

在封裝axios請求的文件中：

let URL = process.env.URL;
axios.defaults.baseURL = URL === 'hmy' ? '/hmy' : '/';

這樣，就完成了二級目錄訪問的配置啦！