前言
在项目开发一直到上线的过程中，我们一般会配置至少三个环境（开发环境 dev、测试环境 test、生产环境prod），多则还有sit、uat等环境，不同的环境其配置也是不一样的，比如接口地址、路由模式等配置，如何更加优雅灵活地切换环境呢？我们可以配合 cross-env，构建不同的 cli build script
使用
1 安装 cross-env 依赖
npm install cross-env -D
2 分别声明不同环境的配置，比如接口地址 API_HOST
2.1 开发环境配置，位于 /config/dev.env.js
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_HOST:'"http://dev.api.samego.com"'
})
2.2 测试环境配置，位于 /config/test.env.js
'use strict'
const merge = require('webpack-merge')
const devEnv = require('./dev.env')
module.exports = merge(devEnv, {
NODE_ENV: '"testing"',
API_HOST:'"http://test.api.samego.com"'
})
-
修改vue项目的 index.js 的 build 节点配置，修改如下
build: { // 声明环境，根据引进不同的环境文件 | add lines prodEnv: require('./prod.env'), testEnv: require('./test.env'), devEnv: require('./dev.env'), }
-
修改 build 下的 webpack.prod.conf.js 配置，修改如下：
... ... // const env = process.env.NODE_ENV === 'testing' // ? require('../config/test.env') // : require('../config/prod.env') const env = config.build[process.env.env_config + 'Env'] ... ... -
修改 build 下的 build.js 配置，修改如下：
// process.env.NODE_ENV = 'production' ... ... // const spinner = ora('building for production...') var spinner = ora('building for ' + process.env.NODE_ENV + ' ...') ... ... -
在 package.json 配置文件里声明并自定义构建指令
"scripts": {
"build-test": "cross-env NODE_ENV=testing env_config=test node build/build.js",
"build-prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
},
-
新建接口文件（此处可以忽略，你可以直接使用process.env.API_HOST），/src/config/application.js
// 接口地址环境 export const API_HOST = process.env.API_HOST -
不同的命令对应不同的环境
# 开发时使用 npm run dev # 测试环境构建 npm run build-test # 生产环境构建 npm run build-prod
