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

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

一、常規打包

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

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

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

二、靜態文件地址修改

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

方法：找到項目的打包配置文件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了。

三、接口地址修改

除了修改靜態文件的路徑，咱們還要修改接口請求地址的路徑，咱們知道在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' : '/';

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

原文出處：https://www.cnblogs.com/webhmy/p/10150482.html