vue 前端灵活改变后端地址

vue 前端灵活改变后端地址

起因：
我们在做项目时；很多时候会遇到后台地址变动，不管是在打包或者是开发中；每一次后台开机启动或者换电脑启动后台，后台地址都会随之变动；而这种情况；每次后台改动前端就要去找地址跟着改；开发还好，实际应用时，每次都要改了之后再打包；频繁打包就很麻烦。有没有什么方式可以直接修改后台地址呢？当然有，该文就是提供一种方便的处理方式。
使用：
第一种方式：
1.我们在脚手架的public文件夹中新建一个js文件，用于存储后台地址配置：
示例 config.js 文件：

module.exports ={interfaceIP:"http://xxxxxx",// interfaceIP: "http://xxxxxxx",};

2.在 vue.config.js 中引入 config.js：
这个地方要注意一下，因为vue.config.js是在Node.js环境下执行的，而不是在浏览器环境下执行，所以要用Node.js中的require语法。

const interfaceIP =require("./public/config");

然后后台代理地址

devServer:{//本机地址host:'localhost',//获取port端口port: port,// 端口配置// port: 1888,// 反向代理配置proxy:{//process.env.VUE_APP_BASE_API的参数会读取对应环境变量数据，//如读取的数据是'/api',那么意思就是前端请求的/api路径都会被带来到，参数target的地址[process.env.VUE_APP_BASE_API]:{/* 服务器5866 本地电脑5566 */target: interfaceIP.interfaceIP,//代理的路径// target: process.env.VUE_APP_BACKEND_URL,changOrigin:true,// 允许跨域ws:true,pathRewrite:{['^'+ process.env.VUE_APP_BASE_API]:'/'}}}}

然后我们在打包的时候就可以看到dist里面有一个config.js 文件，就可以在这个文件中修改地址了；
第二种方式：
第二种就不是直接修改地址了，而是配置环境地址；使用环境变量来设置后台代理地址。在src的同一级新建.env.development文件；在里面配置好需要的多个后台地址。
示例代码如下：

// vue.config.js
module.exports ={devServer:{proxy:{[process.env.VUE_APP_BASE_API]:{/* 服务器5866 本地电脑5566 *///代理的路径target: process.env.VUE_APP_BACKEND_URL,changOrigin:true,// 允许跨域ws:true,pathRewrite:{['^'+ process.env.VUE_APP_BASE_API]:'/'}}}}};

// .env.development
# 开发环境配置
ENV='development'

#设置端口号
port =8080 

# 前端请求路径
VUE_APP_BASE_API='/api'

#后端服务器地址不要忘记添加http或https
VUE_APP_BACKEND_URL= http://XXXXXXXXXXX