关于切换环境变量的问题( 以vue-cli3.0 为例)

  在 项目的开发中我们一般需要区分多种环境,有时候不一定只有开发环境,生产环境,测试环境,还有可能会区分更多的环境,那么区分这些环境的话,我们的配置有多中方式;

  方式一:直接只用  .env.development 和 .env.production 来进行环境的区分,每次发版的时候修改环境变量的值来加以领用;

  方式二:通过服务器的访问域名来区分,一般项目的域名都是不变的,捕捉到当前环境的域名,然后将变量处理一下就可以了;

  方式三: 通过 npm run dev 的命令来区分,我们可以创建多个  .env.modeName 的文件,通过在 package.json 中添加相应的命令,然后添加 --mode=modeName 来进行文件的切换,但是需要注意的是,设置 modeName 的时候,只有在相应的三个模式下才可以,例如:

      "serve": "vue-cli-service serve --mode=work", 是可行的;
         "dev": "npm run serve --mode=work",  是不可行的;
  环境、指令、环境变量之间的关系如下:
vue-cli-service serve

用法:vue-cli-service serve [options] [entry]
选项:
--open 在服务器启动时打开浏览器
--copy 在服务器启动时将 URL 复制到剪切版
--mode 指定环境模式 (默认值:development)
--host 指定 host (默认值:0.0.0.0)
--port 指定 port (默认值:8080)
--https 使用 https (默认值:false)

vue-cli-service build

用法:vue-cli-service build [options] [entry|pattern]
选项:
--mode 指定环境模式 (默认值:production)
--dest 指定输出目录 (默认值:dist)
--modern 面向现代浏览器带自动回退地构建应用
--target app | lib | wc | wc-async (默认值:app)
--name 库或 Web Components 模式下的名字 (默认值:package.json 中的 "name" 字段或入口文件名)
--no-clean 在构建项目之前不清除目标目录
--report 生成 report.html 以帮助分析包内容
--report-json 生成 report.json 以帮助分析包内容
--watch 监听文件变化

  

  对于大多数的项目开发者都不愿意每次发一次版本就切换一次环境,所以用指令来区分环境,进而加载不同的 .env.modeName 是更加的省事也更加的方便的,那么问题就来了:对于本地开发的的时候我们能很快的就输入命令,进行命令的切换进而也执行不同的环境,那么对于维护的成员来说,怎么办呢?

  其实,对于大多数的公司来说,运维都是通过 jenkins 来进行发版的,通过 jenkins 的话,可以直接指定我们要发版的分支,而且他们可以配置系统参数,然后我们通过 process.env.VUECONFIG 来获取到是哪个环境的,再去加载哪个配置就可以了,进行环境变量的配置,对于 vue-cli2.0 的配置,其实就是 merge congfig 文件下的哪个 js 文件的问题,对于 vue-cli3.0 的话,如果我们知道了,process.env.VUECONFIG 之后,我们可以在 vue.config.js 中在 module.export 的 cinfigureWbepack: config => {} 中,通过 process.env.VUECONFIG 判断是什么环境,从而再去配置相应的值;

  我们的脚手架一般都是基于 node.js 的一个服务,其实我们也可以通过另外一种方式来确定是什么环境的,这个需要我们确定好相应的发版分支,利用 node.js 自带的依赖模块 

child_process;结合 shelljs ;通过 child_process 来获取,当前是在哪个分支,然后利用 shelljs 去执行相应的 npm 命令;
const shelljs = require('shelljs')
const childProcess = require('child_process')
// console.log(childProcess)
// console.log(childProcess.execSync)
const branch = childProcess.execSync('git rev-parse --abbrev-ref HEAD').toString().replace(/s+/, '')
  console.log('npm-build.js run branch: ', branch)
  // shelljs.exec(`npm run serve`)

  

原文地址:https://www.cnblogs.com/mufc/p/11653890.html