vue-cli 多环境构建打包

短命女 2023-10-03 14:59 1阅读 0赞

## 多环境简介 ##

官方文档：[https://cli.vuejs.org/zh/guide/mode-and-env.html][https_cli.vuejs.org_zh_guide_mode-and-env.html]

**环境文件**的命名规则：

.env                # 在所有的环境中被载入
    .env.local          # 在所有的环境中被载入，但会被 git 忽略
    .env.[mode]         # 只在指定的模式中被载入
    .env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

**文件中以"键=值"的形式配置环境变量**，如果不同文件存在同名的环境变量，保留高优先级文件中的值。优先级为：`.env.[mode].local` > `.env.[mode]` > `.env.local` > `.env`

> 请注意，只有 `NODE_ENV`，`BASE_URL` 和以 `VUE_APP_` 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到**客户端**侧的代码中。

**嵌入**的意思就是说，在客户端代码中可以访问到这些环境变量。比如可以这样获取变量：`console.log(process.env.VUE_APP_SECRET)`

## 构建时指定环境 ##

环境机制是vue-cli实现的，事实上，我们需要指定vue-cli的`mode`参数才能实现不同环境的构建，命令格式为：`vue-cli-service build --mode {mode}`

回想一下，我们构建时一直用的是`npm run build`。其实这行命令本质就是执行`vue-cli-service build`，它两的对应关系维护在 `package.json`。打开 package.json，你会发现这段配置：

...
      "scripts": {
        
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build"
      },
      ...

当我们运行`npm run build`，node就会去找 scripts对象中的 `build`属性的值，也就是`vue-cli-service build`来执行。  
抽象点表示就是：npm run \{ **key**\} --> scripts\[**key**\]

这样的话，要想指定 vue-cli的`mode`参数，那我们就干脆直接在scripts多加几条命令得了。如下：

...
      "scripts": {
        
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "build:prod1": "vue-cli-service build --mode prod1",
        "build:prod2": "vue-cli-service build --mode prod2"
      },
      ...

当执行 `npm run build:prod1`，实际会执行 `vue-cli-service build --mode prod1`，这个命令指定了构建时使用 `prod1` 环境。相应的就会读取 `.env.prod1` 环境配置。

## 总结 ##

1.  维护不同环境的环境配置。命令格式：`.env.[mode]`
2.  在package.json的scripts属性增加指定了环境的配置。格式：`vue-cli-service build --mode [mode]`
3.  使用scripts的key值进行构建。格式：`npm run [key]`

[https_cli.vuejs.org_zh_guide_mode-and-env.html]: https://cli.vuejs.org/zh/guide/mode-and-env.html