Vue-cli的项目怎么使用命令根据config/dev.env.js进行打包？

Question

不想每次打包的时候都去修改config/prod.env.js

Answer 1

为什么每次打包的时候都要修改 config/prod.env.js？

Answer 2

自己再增加一个环境的打包选项，如npm run test

Answer 3

使用 cross-env 设置环境变量，并配置两个打包命令：

// package.json
"scripts": {
     "build:prod": "cross-env NODE_ENV=production npm run build",
     "build:test": "cross-env NODE_ENV=testing npm run build"
}

然后在 config/prod.env.js 和 config/test.env.js 分别设置生产环境和测试环境的 api 地址：

// config/test.env.js
module.exports = merge(prodEnv, {
  NODE_ENV: '"testing"',
  HOST: '"此处为测试环境 api 地址"'
})
// config/prod.env.js
module.exports = merge(prodEnv, {
  NODE_ENV: '"production"',
  HOST: '"此处为开发环境 api 地址"'
})

上面的都配置好后，HTTP 库就可以根据环境指定 api 地址了：

const fetch = axios.create({
  baseURL: process.env.HOST, // 根据环境指定 api 地址
  timeout: 10000,
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Content-Type': 'application/x-www-form-urlencoded'
  }
});

打包的时候不同的环境需要运行不同的命令：
测试环境：npm run build:test
生产环境：npm run build:prod

Answer 4

vue-cli直接用npm run build命令打包，npm run dev命令调试。