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

2023-12-14 18:08:08

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 文件内定义的变量。

文章来源:https://blog.csdn.net/gongm24/article/details/134922855
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。