Vue配置不同环境 不同命令

1.我们借助 cross-env 插件跨平台地设置及使用环境变量（必须装此依赖）

npm安装方式：npm i --save-dev cross-env

2.我们对config文件夹做配置，新建一个local.env.js（local:测试环境） 文件来配置我们的测试环境:

config配置文件

2.1 local.env.js 代码片段如下：

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"local"',
  BASE_API: '"配置local环境的接口地址"',
  //以下可做其他配置
}

2.2 prod.env.js 代码片段如下：

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"prod"',
  BASE_API: '"配置prod环境的接口地址"',
  //以下可做其他配置
}

3. 在config - index.js文件里面新增如下代码：

build: {
    localEnv:require("./local.env"),
    prodEnv:require("./prod.env"),
    devEnv:require("./dev.env"),
    //以下其他不变
}

4.修改build打包文件里面的webpack.prod.conf.js文件如下：

// const env = require('../config/prod.env')  //改为下面
const env = config.build[process.env.env_config + 'Env'];

5.修改打包文件 build - build.js 如下：（此处可以不修改，只是打包的时候确认环境）

// const spinner = ora('building for production...')  //改为下面
const spinner = ora(`building for ${process.env.NODE_ENV} ...`)

6.修改package.json打包命令：

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "cross-env NODE_ENV=production env_config=prod node build/build.js",  
    "build:local": "cross-env NODE_ENV=production env_config=local node build/build.js"
  },

7. axios请求等地方直接使用配置参数：

const url = process.env.BASE_API;
axios.defaults.baseURL = url;

8.打包命令整理

npm run build   //线上环境
npm run build:local   //local环境
npm run dev   //本地运行

参考文章