手写VUE后台管理系统9 - 多环境配置

vite 本身支持多环境配置，在一个特殊的 import.meta.env 对象上暴露环境变量

在生产环境中，这些环境变量会在构建时被静态替换，因此，在引用它们时请使用完全静态的字符串。动态的 key 将无法生效。例如，动态 key 取值 import.meta.env[key] 是无效的。

内建环境变量

• import.meta.env.MODE：{string} 应用运行的模式。
• import.meta.env.BASE_URL：{string} 部署应用时的基本 URL。他由base 配置项决定。
• import.meta.env.PROD：{boolean} 应用是否运行在生产环境。
• import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与import.meta.env.PROD相反)。

.env 文件

如果还有更多的环境变量需要定义，可以通过 .env 文件自行定义

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

为防止意外地将一些环境变量泄漏到客户端，环境变量必须以 VITE_ 为前缀。

例如下面这个文件

DB_PASSWORD=foobar
VITE_SOME_KEY=123

只有 import.meta.env.VITE_SOME_KEY 可以正常获取到环境变量，而 DB_PASSWORD 则不行。

智能提示

在 .env 文件中自定义的环境变量，如果想要在 ide 编码时获得智能提示，可以在 src 目录下创建一个 env.d.ts 文件，按下面的格式增加 ImportMetaEnv 的定义

使用 vite 创建的 vue 项目中自带了这个文件，文件名为 vite-env.d.ts

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string
  // 更多环境变量...
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

模式

前面介绍的 .env 文件中，还有一个 .env.[mode] 的文件，其中的 mode 就是这里说的模式，与 java 中的 profile 基本一个意思。

vite                   # development 模式
vite dev               # development 模式
vite serve             # production 模式
vite build             # production 模式

也可以通过 --mode 选项自定义模式

vite build --mode uat

如果同一个变量在 .env 中都进行了定义，.env.[mode] 文件内定义的变量优先级高于 .env 文件内定义的变量。