在webpack搭建的vue项目中如何管理好后台接口地址
在最近做的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在本地测试的时候使用的是测试接口,打包的时候会自动将接口替换为生产环境的接口;很方便