文章目录
- 一、前言
- 二、实施
- 三、总结：需要打包区分不同环境
- 四、拓展阅读
一、前言
项目开发阶段，会涉及打包部署到多个环境应用场景，在不同环境中，需要进行项目层面的区分，做不同的操作，可以利用打包的--mode参数配置。
在Vue项目中，可以通过修改package.json文件并创建不同的环境配置文件来实现根据环境传递参数。通过在构建命令中指定环境模式，如npm run build:dev或npm run build:prod，结合在代码中使用环境变量，可以在不同环境下进行自定义操作和配置。在Vue组件中，可以使用process.env访问这些环境变量。
本文将详细介绍如何在Vue项目中使用npm run build命令根据环境传递不同参数。
二、实施
步骤1：修改package.json
首先，需要修改项目的package.json文件，以便在scripts部分定义不同环境下的构建命令。找到scripts部分，并添加以下内容：
scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","build:A": "vue-cli-service build --mode A","build:B": "vue-cli-service build --mode B","build:C": "vue-cli-service build --mode c",
步骤2：在项目根目录中新建.env.
默认情况下，--mode只有3种模式，如果没有配置对应的env文件，默认读取development的配置文件，所以，想要环境变量跟着打包命令走，那需要配置这个模式的env文件，即【env.模式】。
当运行 vue-cli-service 命令时，所有的环境变量都从对应的环境文件中载入。如果文件内部不包含 NODE_ENV 变量，它的值将取决于模式，例如，在 production 模式下被设置为 “production”，在 test 模式下被设置为 “test”，默认则是 “development”。
NODE_ENV将决定您的应用运行的模式，是开发，生产还是测试。
将
NODE_ENV设置为 ‘development’，会创建一个webpack配置，该配置启用热更新，不会对资源进行hash也不会打出vendor bundles，目的是为了在开发的时候能够快速重新构建。将
NODE_ENV设置为 “production”，会创建一个可用于部署的应用程序。将
NODE_ENV设置为 “test”，会创建一个优化过后的，并且旨在用于单元测试的webpack配置，它并不会处理图片以及一些对单元测试非必需的其他资源。
文件中定义的数据只能是【NODE_ENV】、【BASE_URL】、【VUE_APP_开头】这3种key。
注⚠️：只有
NODE_ENV，BASE_URL和以VUE_APP_开头的变量将通过webpack.DefinePlugin静态地嵌入到客户端侧的代码中。嵌入的意思就是说，在客户端代码中可以访问到这些环境变量。比如可以这样获取变量：
console.log(process.env.VUE_APP_SECRET)
以【 npm run build:A】进行打包为例，当执行 npm run build:A，实际会执行 vue-cli-service build --mode A，这个命令指定了构建时使用 A 环境。相应的就会读取 .env.A 环境配置。
.env.A配置文件如下：
注⚠️：打包后得到的参数，是【.env】文件和【.env.打包模式】文件合并一起的数据，如果key重复，以【.env.打包模式】文件的值为最终结果。
环境文件的命名规则：
.env # 在所有的环境中被载入
.env.local # 在所有的环境中被载入，但会被 git 忽略
.env.[mode] # 只在指定的模式中被载入
.env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略
文件中以"键=值"的形式配置环境变量，如果不同文件存在同名的环境变量，保留高优先级文件中的值。优先级为：.env.[mode].local > .env.[mode] > .env.local > .env
即：为一个特定模式准备的环境文件 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。
此外，Vue CLI 启动时已经存在的环境变量拥有最高优先级，并不会被 .env 文件覆写。.env 环境文件是通过运行 vue-cli-service 命令载入的，因此环境文件发生变化，需要重启服务。
步骤3：在项目应用
const baseurl = process.env.VUE_APP_ONE || process.env.VUE_APP_TWO
三、总结：需要打包区分不同环境
-
package.json文件scripts部分"build:xxx": "vue-cli-service build --mode xxx"配置环境打包命令。 -
需要创建【
.env.mode的模式值】这个文件，如果没配置会默认读取dev的配置文件，文件里面可以配置专属的环境值，切记key只能是【NODE_ENV】、【BASE_URL】、【VUE_APP_开头】。 -
打包后打印的
process.env的值是【.env.mode的模式值】文件与【.env】文件合并的对象值，如果key重复，最终结果为【.env.mode的模式值】文件值。
四、拓展阅读
- 《Vue进阶（五十一）： vue-cli 脚手架 webpack.base.conf.js 配置文件讲解》
- 《Vue CLI 模式和环境变量》
- 《Vue CLI 服务》
