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环境的接口地址"',
//以下可做其他配置
}
- 在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"
},
- axios请求等地方直接使用配置参数：
const url = process.env.BASE_API;
axios.defaults.baseURL = url;
8.打包命令整理
npm run build //线上环境
npm run build:local //local环境
npm run dev //本地运行
