javascript - Vue cli 根据run不同环境配置不同接口调取地址？

Question

开发过程中 npm run dev 组件中接口调取的地址是 全局global定义的一个API变量如下：

// 开发环境打开 ↓↓↓
// global.API = '/api';

// 生产环境打开 ↓↓↓
// global.API = '';

this.$http.post(API + '/User/ResetPwd', {id: id})

生产环境 npm run build 时如何自动改变API成生产环境变量？

Answer 1

写配置文件，在npm run build中 先复制配置文件(cp env.prod.js env.js) 再运行

"scripts": {
    "dev": "cp env.dev.js env.js && node build/dev-server.js",
    "build-test": "cp env.test.js env.js && node build/build.js"
    "build": "cp env.prod.js env.js && node build/build.js"
},

Answer 2

楼上方法简单粗暴，但是效果不错

Answer 3

第一种方法:

可以使用 "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",
}

在代码中:

if (process.env.NODE_ENV === 'developmentHot')
{
  global.API = '/api';
}
else
{
  global.API = '';
}

第二种方法:

在webpack.config.js中使用DefinePlugin:

if (process.env.NODE_ENV !== 'developmentHot') {
  webpackConfig.plugins.push(
    new webpack.DefinePlugin({
      __DEFINE_XXX__: JSON.stringify(true)
    })
  )
}

在代码中:

global.API = '';
if (typeof __DEFINE_XXX__ === 'undefined')
{
  global.API = '/api';
}

以上两种方式在我的electron-webpack库中均有使用...

https://github.com/llwslc/ele...