主要思路

  1. 配合cross-env工具包，通过命令行设置NODE_ENV，控制加载对应的环境js；
  2. 结合webpack的new webpack.DefinePlugin定义的全局变量process.env**【当前这个是自定义的】**，使用到需要的vue组件当中；

具体实现

安装cross-env

设置和使用跨平台环境变量的脚本

  1. npm install --save-dev cross-env

配置脚本命令

修改项目中的package.json

  1. {
  2.     ...
  3.     "scripts": {
  4.       ...
  5.       "build": "cross-env NODE_ENV=production node build/build.js",
  6.     "build--huaweicloud": "cross-env NODE_ENV=huaweicloud node build/build.js",
  7.     "build--prod": "cross-env NODE_ENV=production node build/build.js"
  8.   }
  9. }
  1.  说明：设置环境变量，通过npm run XXXX对应的命令起效；

修改打包文件

…/build/build.js

image.png
修改部分：

  1. 'use strict'
  2. require('./check-versions')()
  4. // process.env.NODE_ENV = 'production'
  6. const ora = require('ora')
  7. const rm = require('rimraf')
  8. const path = require('path')
  9. const chalk = require('chalk')
  10. const webpack = require('webpack')
  11. const config = require('../config')
  12. const webpackConfig = require('./webpack.prod.conf')
  14. // const spinner = ora('building for production...')
  15. const spinner = ora(`building for ${process.env.NODE_ENV} mode...` )
  16. spinner.start()

…/build/webpack.prod.conf.js

image.png
修改部分：

  1. const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
  2. const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
  4. // const env = process.env.NODE_ENV === 'testing' ? require('../config/test.env') : require('../config/prod.env')
  5. // 指定加载的文件，确定对应变量
  6. let curEnvPath = `../config/${process.env.NODE_ENV}.env.js`
  7. const env  = require(curEnvPath)

作用：加载的js，最终new webpack.DefinePlugin会生成到自定义的全局变量里面保存着
image.png

…/config/…

修改当前目录下的文件，或者添加对应的需要的环境的js

  1. // 添加一个新的环境的js
  2. huaweicloud.env.js
  3. // 修改原prod.env.js，因为前面是根据配置的NODE_ENV的变量来匹配
  4. production.env.js

注意：因为修改prod.env.js成production.env.js，其他文件内容对这个文件的引用的需要作出调整，例如：dev.env.js

…/config/dev.env.js

  1. 'use strict'
  2. const merge = require('webpack-merge')
  3. const prodEnv = require('./production.env')
  5. module.exports = merge(prodEnv, {
  6.   NODE_ENV: '"development"',
  7.   // 开发环境
  8.   ZZ_API: '"http://123.12.1.12:1234"',
  9.   applicationCode: '"XX_XXXX_XX"'
  10. })

…/config/huaweicloud.env.js

  1. 'use strict'
  2. module.exports = {
  3.   NODE_ENV: '"huaweicloud"',
  4.   // 生产环境-华为云
  5.   ZZ_API: '"http://100.0.0.111:88"',
  6.   applicationCode: '"YY_YY_YY"'
  7. }

…/config/production.env.js

  1. 'use strict'
  2. module.exports = {
  3.   NODE_ENV: '"production"',
  4.   // 生产环境-公司
  5.   ZZ_API: '"http://172.11.1.11:1111"',
  6.   applicationCode: '"ZZ_ZZZZ_ZZ"'
  7. }

应用

直接应用到想要的位置上面去,因为是全局变量
image.png

  1.  // code: "WF_FRAME_ATTACH_MD_XXZX_OA",
  2.         code: `WF_FRAME_ATTACH_${process.env.applicationCode}`,
  3.         // 业务大类
  4.         busiId: "WORKFLOW_INSTANCE",
  5.         // 业务小类
  6.         busiModule: "FRAME_ATTACH",
  7.         // 必填
  8.         busiType: "",
  9.         creator: "",
  10.         tenantCode: "GDSXXZX",
  11.         // 必填sysCode
  12.         applicationCode: `${process.env.applicationCode}`,

就这样子，算是结束了，有问题欢迎继续交流~~