1.我們借助 cross-env 插件跨平臺地設(shè)置及使用環(huán)境變量（必須裝此依賴）

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

2.我們對config文件夾做配置，新建一個local.env.js（local:測試環(huán)境） 文件來配置我們的測試環(huán)境:

config配置文件

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

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

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

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

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 如下：（此處可以不修改，只是打包的時候確認(rèn)環(huán)境）

// 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請求等地方直接使用配置參數(shù)：

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

8.打包命令整理

npm run build   //線上環(huán)境
npm run build:local   //local環(huán)境
npm run dev   //本地運(yùn)行

參考文章