Vue.js vue-cli 請求域名(URL) 部署后可修改

Vue前后端分離開發，會出現跨域等問題，同時請求的后端接口地址可能隨時變動，有時甚至部署好后出現臨時更改的情況。

vue-cli里面配置接口URL一般可在.env.development（開發環境），.env.production（生成環境），

這樣在npm run serve或者npm run build的時候，路徑可通過process.env.方式獲取到，如下.env.development文件（.env.production內容一樣）

###.env.devlelopment###
###VUE_APP_ 前綴必須要，這樣在代碼中可直接process.env.VUE_APP_XXXXX 獲取到值###
VUE_APP_HOST_URL=http://xxx.xxx.xxx:port/
VUE_APP_SOCKET_URL=ws://xxx.xxx.xxx:port/websocket/message?token=

上面的方式，在每次更改URL后都需要編譯打包，過於麻煩，如果打包部署好后，后端臨時改動接口URL，還得再編譯。所以可以采用全局變量的方式配置URL路徑，過程如下：

1. 在public文件下創建如：server-config.js文件（在public文件夾下創建的文件不會被編譯）

2. 在index.html中直接引入：

<script src="<%= BASE_URL %>server-config.js"></script>

3. server-config.js

// 前端請求URL靈活配置文件
window.serverConfig = {
  // 后台服務器
  VUE_APP_HOST_URL: 'http://xxx.xxx.xxx:port/',
  // 后台服務器websocket連接
  VUE_APP_SOCKET_URL: 'ws://xxx.xxx.xxx:port/websocket/message?token='
}

4. 在項目中直接通過window.serverConfig.VUE_APP_HOST_URL獲取到對應的值。

5. 編譯打包后，部署到服務器，如果需要臨時變動URL，直接修改server-config.js即可。