vue打包后，请求地址可用文件配置随时修改

前端辣白菜

已于 2022-01-28 13:49:48 修改

阅读量2.4k

点赞数

分类专栏： vue后台管理开发笔记文章标签： vue.js 前端 javascript

于 2022-01-24 18:32:36 首次发布

本文链接：https://blog.csdn.net/weixin_42484657/article/details/122671140

版权

vue后台管理开发笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

需求：vue项目打包过后，发现地址错了或者发布到别的服务器发现请求的地址不对，每次都要去重新打包，太浪费时间，这个时候每次打包的时候自动生成一个config.js配置文件，修改它即可；

1：在pulic文件夹创建config.js文件（public作为静态资源打包不会加入其中）

2：找到index.html文件引入config.js (正常config和index是在同一文件夹或者同级目录不要找错)

3：找到项目中自己全局写的接口请求创建axios实例的地方，我的放在了request.js文件

定义baseURL，因为我们打包过后是生产环境，所有打包过后会直接去找我们定义的config.js对象的VUE_APP_URL.baseUrl;否则不是生产环境，就是默认找我们项目中反向代码配置的开发地址

let baseURL;
if (process.env.NODE_ENV === 'production') {
  baseURL = VUE_APP_URL.baseUrl;
} else {
  baseURL = process.env.VUE_APP_BASE_API; 
}
// 创建axios实例
const service = axios.create({
  baseURL: baseURL,
  withCredentials: true,
  timeout: 5000
});

到此，结束，打包过后会多出来一个config文件