第三篇-vue3 项目中配置模式和环境变量

vue►vue3项目 , 评论

Vue内置的模式

Vue CLI 内置了三种模式

  • developement 模式，使用 vue-cli-service serve 命令的时候，启动的开发环境就是这个模式，这个模式下运行的 webpack 会启动热更新，不会对资源进行 hash 也不会打出 vendor bundles，目的是为了在开发的时候能够快速重新构建。
  • test 模式，使用 vue-cli-service test:unit 命令的时候，启动的单元测试的环境就是这个模式，这个模式下的 webpack 不会处理图片以及一些对单元测试非必需的其他资源。
  • production 模式，vue-cli-service build 命令的时候，运用的就是这个模式，这个模式的 webpack 会运行 mode=production 的配置

自定义运行模式

在执行 vue-cli-service 的命令的时候，可以通过 --mode 指定想要运行的模式，这将会覆盖默认的模式

例如在公司开发中，都会有一个测试环境，那么这个测试环境会有一些和开发/生产环境都不一样的东西，比如说我们后端服务的url，那么我们就可以给这个测试环境的打包指定一个模式，这样在打包的时候，会从指定模式的环境文件中加载环境变量，在 package.json 中添加一个 script 命令 "build:t": "vue-cli-service build --mode t"，

注意：尽量不要和默认的模式冲突

package.json

1
2
3
4
5
6
7
8
9
10
11
12
{
  ...
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:t": "vue-cli-service build --mode t",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  }
  ...
}

执行 npm run build:t 的时候会运行 t 模式，会从 .env / .env.local / .env.t / .env.t.local 这些文件中加载环境变量，稍后来创建环境文件

Vue内置的环境变量

Vue CLI 内置了两个环境变量

环境变量/模式developmenttestproduction
NODE_ENVdevelopmenttestproduction
BASE_URL（就是vue.config.js 中的publicPath ，默认是 /）///

自定义环境变量

当运行 vue-cli-service 命令时，所有的环境变量都从对应的环境文件中载入，这就给我们提供了自定义环境变量的方式

什么是环境文件

在项目根目录下可以创建四种形式的环境文件

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

环境文件只包含环境变量的“键=值”对：

1
VUE_APP_BASE_URL="http://dev.server.com" // 后端服务的url

环境文件的优先级

  1. Vue CLI 启动时已经存在的环境变量拥有最高优先级，不会被 .env 文件覆盖，但是可以被 .env.[mode] 文件覆盖
  2. 为一个特定模式准备的环境文件 (例如 .env.t) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。

环境文件是通过运行 vue-cli-service 命令载入的，因此环境文件发生变化，你需要重启服务。

动态计算环境变量

在 vue.config.js 文件中计算环境变量。它们仍然需要以 VUE_APP_ 前缀开头。

例如计算每次编译的版本和时间

1
2
3
4
/* eslint-disable @typescript-eslint/no-var-requires */
const pkg = require("./package.json");
process.env.VUE_APP_VERSION = pkg.version;
process.env.VUE_APP_DATE_TIME = new Date().toLocaleString();

环境变量的运用

只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到代码中

例如上面提到的 VUE_APP_BASE_URL 就是已 VUE_APP 开头的

建议不要在任何文件修改 BASE_URL 的值，在执行 vue-cli-service build 命令的模式环境文件里都建议把 NODE_ENV 改成 production

先来配置一下环境变量看一下环境变量的用法

在根目录新建以下文件

  • .env.development 指定开发环境使用的环境变量
  • .env.production 指定生产环境使用的环境变量
  • .env.t 指定测试环境使用的环境变量

就简单配置一个用来区分运行环境的环境变量 VUE_APP_ENV ，这个变量可以任意取，只要求已 VUE_APP 开头，并且应该在所有的环境文件都包含这个环境变量

.env.development

1
VUE_APP_ENV=dev

.env.production

1
VUE_APP_ENV=prod

.env.t

1
VUE_APP_ENV=t

在项目中使用环境变量

通过 process.env.[环境变量] 的方式获取到运行模式的环境文件配置的环境变量的值

在 src/App.vue 中使用一下

1
2
3
4
5
6
7
8
9
10
11
12
<template>
  <el-config-provider :locale="zhCn">
   	<!-- 忽略其他代码 -->
    <div class="bg-red">{{ env }}</div>
  </el-config-provider>
</template>

<script setup lang="ts">
import { Ref, ref } from "@vue/reactivity";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
const env: Ref = ref(process.env.VUE_APP_ENV); // 启动项目这个值是dev
</script>

20210908102247092

运行其他模式看一下结果，命令行执行

1
2
3
yarn serve --mode t
#or
npm run serve --mode t

image-20210908102424279

运行 production 模式

1
2
3
yarn serve --mode production
#or
npm run serve --mode production

image-20210908102612902

环境变量不只是在 src 下的文件可以使用，在根目录下的 babel.config.js / vue.config.js 等文件中也可以使用.

在 public/index.html 中使用环境变量

所有解析出来的环境变量都可以在 public/index.html 中以 **HTML 插值**中介绍的方式使用。

因为 index 文件被用作模板，所以你可以使用 lodash template 语法插入内容：

  • <%= VALUE %> 用来做不转义插值；
  • <%- VALUE %> 用来做 HTML 转义插值；
  • <% expression %> 用来描述 JavaScript 流程控制。

例如在 index.html 使用一个 meta 标签标记我们项目的模式、版本和打包的时间

1
2
3
<meta content="<%= VUE_APP_ENV %>">
<meta content="<%= VUE_APP_VERSION %>">
<meta content="<%= VUE_APP_DATE_TIME %>">

执行打包命令看 dist 目录输出的html

1
2
3
yarn build --mode development
#or 
npm run build --mode development

image-20210908110354110

运行 t 模式的打包

1
2
3
yarn build:t
#or 
npm run build:t

image-20210908110452360

运行 production 模式的打包，build 的默认模式就是 production

1
2
3
yarn build
#or 
npm run build

image-20210908110602026

实际开发中还需要的运行环境

经过刚才的打包发现，在指定 --mode t 的时候，打包后的文件没有被压缩

这是因为没有指定 t 模式的 NODE_ENV=production ，所以使用的是 development 的 webpack 配置

所以要在环境文件中指定 NODE_ENV 的值

.env.development

1
NODE_ENV=development

.env.t

1
NODE_ENV=production

.env.production

1
NODE_ENV=production

再次执行 yarn build:t 或 npm run build:t，dist 目录下的文件就已经是压缩过的了

image-20210908111155342

还有其他实际开发中需要配置的环境变量，比如后端接口的地址，具体看自己项目吧

完结

项目已经上传到 github 和 gitee

GitHub: https://github.com/wukang0718/cli-create-project

Gitee: https://gitee.com/wu_kang0718/cli-create-project

下一篇：添加工具规范 git commit message

武康前端开发

一个做前端开发的小学生