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即可。