vue 打包后，如何修改接口地址？

用户9914333

发布于 2022-07-21 12:11:09

3.1K00

代码可运行

文章被收录于专栏：bug收集bug收集

运行总次数：0

代码可运行

背景

在 vue 项目中，我们可以通过不同的环境，访问不同的服务器. 虽然可以使用环境的切换，但是在打包成html文件后，想对其进行修改就不行了。

// 环境的切换
if (process.env.NODE_ENV == 'development') {    
    axios.defaults.baseURL = 'https://localhost:8888';} 
else if (process.env.NODE_ENV == 'debug') {    
    axios.defaults.baseURL = '';
} 
else if (process.env.NODE_ENV == 'production') {    
    axios.defaults.baseURL = 'https://www.xxx.com';
}

需求，给用户提供，可以随时修改接口地址的方法

解决方案

添加一个 config.js ，用户可以通过修改此文件，使用对接口地址的配置

具体操作步骤：

1. 创建 config.js 文件

首先我们在public文件下建立一个js文件，就叫config.js吧，内容为

window.g = {
  AXIOS_TIMEOUT: 10000,
  ApiUrl: 'http://localhost:21021/api/' // 配置服务器地址,
}

2. 引用 config.js 文件

接下来我们只需要在index.html这个入口文件里引入该文件（注意路径就ok）

<script type="text/javascript" src="/public/config.js"></script>

3. 使用 config.js 中的值

可以在封装 axios 的代码中，设置 baseUrl 时，直接使用 config.js 中配置的值。代码如下：

var baseURLStr = window.g.ApiUrl
// 创建axios实例
const service = axios.create({
  baseURL: baseURLStr, // api的base_url
  timeout: 5000 // 请求超时时间
})

总结

最后在打包成功之后，config,js文件不会被打包，依然存在public文件夹下，如果需要修改只需要用记事本打开文件修改地址就OK了，而且该方法也不会影响开发模式。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-09-24，如有侵权请联系 cloudcommunity@tencent.com 删除

打包

javascript

html

本文分享自 bug收集微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

打包

javascript

html

登录后参与评论

暂无评论

vue 打包后，如何修改接口地址？

vue 打包后，如何修改接口地址？

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐