vue項目打包后 希望可以修改配置（接口地址，系統名稱等）

需求：

項目打包發布，之后可能存在接口域名更換，項目名稱修改等情況，就需要開發人員重新修改代碼，重新發布，比較費時費力。希望可以將這些配置在一個文件中，如需更換，運維可直接打開配置文件，更改保存即生效。

實現：

【一】：Vue項目下找到public文件夾（沒有public的找到static文件夾），在該文件夾下建 config.js 文件（文件名隨意）

 

寫入代碼：（下面都以static的為例）

window.g = {
  localBaseUrl: 'http://xx.249.3.124:19088/sjgj', // 本項目地址
  middleBaseUrl: 'http://xx.249.3.124:19013', // 中台地址
};

【二】：在 項目 index.html 文件中引入該文件

<script src="./static/config.js"></script>

【三】：頁面中使用

// 例如
const baseURL = process.env.NODE_ENV === 'development' ? 'http://xxx.xxx.xxx.xxx:10087' : window.g.localBaseUrl
const authURL = process.env.NODE_ENV === 'development' ? 'http://xxx.xxx.xxx.xxx:9833' : window.g.middleBaseUrl

總結：

以上配置后，在我們項目打包后可以看到多了個 config.js 文件，如需修改相關配置，運維人員可自行更改。如配置更改后不生效，可清除瀏覽器緩存后再查看。