Vue进阶（贰幺贰）npm run build多环境编译

一、前言

项目开发阶段，会涉及打包部署到多个环境应用场景，在不同环境中，需要进行项目层面的区分，做不同的操作，可以利用打包的--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

三、总结：需要打包区分不同环境

1. package.json文件scripts部分 "build:xxx": "vue-cli-service build --mode xxx" 配置环境打包命令。

2. 需要创建【.env.mode的模式值】这个文件，如果没配置会默认读取dev的配置文件，文件里面可以配置专属的环境值，切记key只能是【NODE_ENV】、【BASE_URL】、【VUE_APP_开头】。

3. 打包后打印的process.env的值是【.env.mode的模式值】文件与【.env】文件合并的对象值，如果key重复，最终结果为【.env.mode的模式值】文件值。

四、拓展阅读

• 《Vue进阶（五十一）： vue-cli 脚手架 webpack.base.conf.js 配置文件讲解》
• 《Vue CLI 模式和环境变量》
• 《Vue CLI 服务》