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