需求：

在打包成功之後在dist中會生成一個配置檔案，配置檔案中包含要請求的地址，通過直接修改配置檔案中的地址即可成功修改請求地址，不需要再重新打包。

實現程式碼：

1.public資料夾下新建一個config.js檔案，與index.html同級：

const Glod = {
  // baseURL: 'https://ltnapii.cloudcc.com/api',
  // baseURLNoApi: 'https://ltnapii.cloudcc.com/',
  baseURL: 'https://ccapi-gwi.cloudcc.com/api',
  baseURLNoApi: 'https://ccapi-gwi.cloudcc.com/',
}

exports = Glod

2.index.html中引入該js檔案：

<script type="text/javascript" src="./config.js"></script>

3.vue.config.js中require該js檔案：

const Glod = require('./public/config') // 配置檔案

target: Glod.baseURL, //伺服器

4.main.js中全域性定義：

Vue.prototype.$baseConfig = Glod;　

5.其他js、vue檔案中使用：

baseURL: Glod.baseURLNoApi,

this.$baseConfig.baseURL;

此時，程式碼就寫完了，在打包成功之後dist資料夾下會生成建立的config.js檔案，但該檔案與public下的config.js不是同一個檔案，在修改dist下的配置檔案時，並不會修改public下的配置檔案，但是請求地址會改變。因為app.js檔案裡的地址是用的定義的Glod常量，並不是寫死的地址。

測試：

測試修改dist中配置檔案地址時是否生效：

1.安裝http-server或者anywhere 搭建web伺服器環境(建議使用anywhere)

npm install anywhere -g

2.在dist開啟命令列輸入anywhere，瀏覽器會自己開啟，那麼你打包好的專案就相當於在伺服器上運行了，這時你再修改config.json裡面的地址，重新整理網頁，可通過檢視介面訪問地址是否更改為自己設定的地址，此時可驗證程式碼是否配置成功。

注意：

1.在public下的配置檔案中定義了一個常量Glod，在引入index.html中後成為全域性常量，除了vue.config.js中不能訪問到，其他檔案中均可以訪問。之所以在main.js中又定義了一個全域性變數baseConfig是為了保持統一，在.vue檔案中需要使用地址時直接通過this.$baseConfig來訪問。

2.我用的是vue-cli4.4.6，不同版本的腳手架建立config.js檔案的位置不同，可自行百度，但設定方式基本相同。

3.參考連結：

https://blog.csdn.net/qq_39241544/article/details/106791093

https://blog.csdn.net/qq_41772754/article/details/88106508

https://www.cnblogs.com/xiaolucky/p/12929720.html