在webpack搭建的vue項目中如何管理好後臺接口地址
阿新 • • 發佈:2018-02-02
csdn 項目打包 管理 baidu bit class 配置信息 config devel
在最近做的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項目中如何管理好後臺接口地址