vue前端灵活改变后端地址两种方式
作者：aCknow
最近在学习或工作中遇到,把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
总结
到此这篇关于vue前端灵活改变后端地址两种方式的文章就介绍到这了,更多相关vue前端改变后端地址内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！