vue-cli 利用 webpack 給生產環境和發布環境配置不同的接口地址的三種方法
阿新 • • 發佈:2017-07-28
方法 -1016 開發環境 class 們的 pack json config proc
第一種方法:
在/config/dev.env.js下配置如下
在/config/prod.env.js下配置如下
已經分別設定路徑,接下來就是如何調用的問題了。
原來api文件裏代碼如圖所示
修改為
然後就完成了我們的配置工作。最後,重啟項目,就能使新配置的接口地址生效了。
在經過這樣的配置之後,我們在運行
npm run dev
的時候,跑的就是開發環境的接口。而我們運行
npm run build
打包項目的時候,打包的是服務器正式接口,我們就不用調來調去得了。
第二種方法:
可以使用 "cross-env": "^3.1.3" 這個庫.
在 package.json 中同樣需要兩個命令:
"scripts": {
"dev": "cross-env NODE_ENV=developmentHot node tasks/runner.js",
"pack": "cross-env NODE_ENV=developmentPack node tasks/runner.js",
}
在代碼中可以這樣使用
第三種方法:
在webpack.config.js中使用DefinePlugin:
if (process.env.NODE_ENV !== ‘developmentHot‘) { webpackConfig.plugins.push( new webpack.DefinePlugin({ __DEFINE_XXX__: JSON.stringify(true) }) ) }
在代碼中
在代碼中:
請使用手機"掃一掃"x
vue-cli 利用 webpack 給生產環境和發布環境配置不同的接口地址的三種方法