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

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

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

　　方式一：直接只用  .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`)

以上是 关于切换环境变量的问题（ 以vue-cli3.0 为例） 的全部内容， 来源链接： utcz.com/z/374667.html

回到顶部