在webpack搭建的vue项目中如何管理好后台接口地址

Posted 2020-10-23 林子lxl

在最近做的vue项目中,使用了webpack打包工具,以前在做项目中测试环境和生产环境的接口地址都是一样的,由于现在接口地址不一样,需要在项目打包的时候手动切换不同的地址,有时候忘记切换就要重新打包,来回很是麻烦,今天网上翻看到一个很好的方法可以解决这个问题,也是由于对webpack工具不是很了解,其实这个工具已经提供了解决方案.

参考网站:http://blog.csdn.net/gebitan505/article/details/58166055;

在config文件夹里面有三个js文件,分别是dev.env.js,index.js和prod.env.js,分别代表了测试环境的配置信息,主要的配置信息,生产环境的配置信息.

打开dev.env.js文件;在NODE_ENV下面增加一项，代码如下：

var merge = require(‘webpack-merge‘)
var prodEnv = require(‘./prod.env‘)

module.exports = merge(prodEnv, {
  NODE_ENV: ‘"development"‘,
  API_ROOT: ‘"//192.168.1.8/api"‘//测试环境的接口
})

然后，在编辑prod.env.js文件，代码如下

module.exports = {
  NODE_ENV: ‘"production"‘,
  API_ROOT: ‘"//www.baidu.com/api"‘//生产环境的接口
}

最后将设置的root url改成:process.env.API_ROOT,

例如将let rootUrl = "http://test.api.com"改为let rootUrl = process.env.API_ROOT;

webpack在本地测试的时候使用的是测试接口,打包的时候会自动将接口替换为生产环境的接口;很方便