vuecli 编译后部署_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中直接引入：

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