在最近做的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在本地測試的時候使用的是測試接口,打包的時候會自動將接口替換為生產環境的接口;很方便

在webpack搭建的vue項目中如何管理好後臺接口地址