一、需求背景
由于近期公司需要迁移服务至新的服务上，前端业务代码相同，但是调用后端接口域名及前端部署域名不同，因此不可能拆分为两个项目，因为后期如果有需求变更，要改两处；
二、修改或新增步骤
（一）、 package.json
修改前
"scripts": {
"build:prod": "cross-env env_config=prod node --max-old-space-size=4096 build/build.js",
"build:dev": "cross-env env_config=dev node --max-old-space-size=4096 build/build.js",
},
修改后
image.png
"scripts": {
"devnew": "webpack-dev-server --inline --progress --config build/webpack.devnew.conf.js",
"build:prod": "cross-env NODE_ENV=production env_config=prod node --max-old-space-size=4096 build/build.js",
"build:dev": "cross-env NODE_ENV=development env_config=dev node --max-old-space-size=4096 build/build.js",
"build:prodnew": "cross-env NODE_ENV=productionnew env_config=prodnew node --max-old-space-size=4096 build/build.js",
"build:devnew": "cross-env NODE_ENV=developmentnew env_config=devnew node --max-old-space-size=4096 build/build.js",
},
（二）、 新增webpack.devnew.conf.js
image.png
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
const api = require('../src/apiUrl');
const env = require('../config/devnew.env');
// 因为DefinePlugin插件直接执行文本替换，给定的值必须包含字符串本身内的实际引号。
// JSON.stringify(api.master)会变为字符串，是以"字符开始跟结束的字符串。
// 如果外层再加 " 号会出现错误，这里要使用 ' 号，
env.api = "'" + JSON.stringify(api.devnew) + "'";
略。。。。。
（三）、 新增config/devnew.env.js文件
'use strict'
const merge = require('webpack-merge')
const prodnewEnv = require('./prodnew.env')
module.exports = merge(prodnewEnv, {
NODE_ENV: '"developmentnew"',
ENV_CONFIG: '"devnew"',
})
（四）、 新增config/prodnew.env.js文件
'use strict'
module.exports = {
NODE_ENV: '"productionnew"',
ENV_CONFIG: '"prodnew"',
}
（五）、 修改config/index.js文件
如果build/webpack.prod.conf.js 里env 是这样定义的--- const env = require('../config/'+process.env.env_config+'.env') 则（五）、 修改config/index.js文件 整个步骤可以省略。
image.png
build: {
prodEnv: require('./prod.env'),
prodnewEnv: require('./prodnew.env'),
devEnv: require('./dev.env'),
devnewEnv: require('./devnew.env'),
testEnv: require('./test.env'),
}
（六）、 修改build/build.js文件
image.png
修改前
image.png
process.env.NODE_ENV = 'production'
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
const spinner = ora('building for production...')
spinner.start()
修改后
image.png
// process.env.NODE_ENV = 'production'
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
// 这里的process.env.NODE_ENV 值通过package.json scripts 类似build:prod 传递
var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
spinner.start()
需要注意的是： 这里的process.env.NODE_ENV 值通过package.json scripts 类似build:prod 里的NODE_ENV=production 传递
image.png
（七）、 修改build/webpack.prod.conf.js文件
image.png
修改前后
// const env = process.env.NODE_ENV === 'testing'
// ? require('../config/test.env')
// : require('../config/prod.env')
const env = config.build[process.env.env_config+'Env']
// 或者改成下面的方式 更方便，无需进行（五）、 修改config/index.js文件 这步操作。
// const env = require('../config/'+process.env.env_config+'.env')
image.png
修改前后
const api = require('../src/apiUrl');
// if(process.env.env_config === 'prod') {
// // 因为DefinePlugin插件直接执行文本替换，给定的值必须包含字符串本身内的实际引号。
// // JSON.stringify(api.master)会变为字符串，是以"字符开始跟结束的字符串。
// // 如果外层再加 " 号会出现错误，这里要使用 ' 号，
// env.api = "'" + JSON.stringify(api.master) + "'";
// } else if(process.env.env_config === 'dev') {
// env.api = "'" + JSON.stringify(api.dev) + "'";
// }
if(process.env.env_config === 'prod') {
// 因为DefinePlugin插件直接执行文本替换，给定的值必须包含字符串本身内的实际引号。
// JSON.stringify(api.master)会变为字符串，是以"字符开始跟结束的字符串。
// 如果外层再加 " 号会出现错误，这里要使用 ' 号，
env.api = "'" + JSON.stringify(api.master) + "'";
} else if(process.env.env_config === 'dev') {
env.api = "'" + JSON.stringify(api.dev) + "'";
}else if(process.env.env_config === 'prodnew') {
env.api = "'" + JSON.stringify(api.masternew) + "'";
}else if(process.env.env_config === 'devnew') {
env.api = "'" + JSON.stringify(api.devnew) + "'";
}
（八）、 修改apiUrl.js文件
新增新的一套正式和测试环境接口
image.png
（九）、 检查api.js及所有.vue文件中有没有直接写死的接口名
有的话 需要用变量的形式；
（十）、 如果两套环境有很多不一样的地方，可以考虑采用将环境变量存进vuex中然后直接通过this.$store.state.APIType取值进行判断
vuex的index.js中
image.png
state:{
APIType: '初始化当前环境',
},
mutations: {
getAPITypeInVuex(state, num) {
state.APIType = num;
},
然后在api.js中执行store.commit('getAPITypeInVuex', getAPIType()); 即可
三、使用步骤
（一）、本地启动项目
npm run dev 启动老接口项目
npm run devnew 启动新接口项目
（二）、打包项目
npm run build:dev 打包老测试接口项目
npm run build:devnew 打包老测试接口项目
npm run build:prod 打包老正式接口项目
npm run build:prodnew 打包新正式接口项目
（三）、使用JavaScript判断当前处于什么环境
两套测试环境
process.env.NODE_ENV === 'development'
process.env.NODE_ENV === 'developmentnew'
两套正式环境
process.env.NODE_ENV === 'production'
process.env.NODE_ENV === 'productionnew'
示例
image.png
网友评论