第一種方法：

在/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 給生產環境和發布環境配置不同的接口地址的三種方法