首页 前端知识 【Vite】环境变量的配置与使用

【Vite】环境变量的配置与使用

2024-08-14 00:08:06 前端知识 前端哥 140 423 我要收藏

构建模式

defineConfig 接收参数 { mode },这里的 mode 就是构建的模式

import { defineConfig } from 'vite';

export default defineConfig(({ mode }) => {
    console.log('mode', mode);
});
"scripts": {
    "dev": "vite", // 执行 `vite`, mode 为 development
    "build": "vite build" // 执行 `vite build`, mode 为 production
},

mode 还可以被显式地传入:

"scripts": {
    "dev": "vite --mode testing", // 执行 `vite`, mode 为 testing
},



配置文件

Vite 使用 dotenv 从 [环境目录] 中的下列文件加载额外的环境变量:

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载,但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载,但会被 git 忽略
  • 一份用于指定模式的文件 (例如 .env.production) 会比通用形式的优先级更高 (例如 .env)。
  • Vite 执行时已经存在的环境变量有最高的优先级,不会被 .env 类文件覆盖。
    例如运行 VITE_SOME_KEY=123 vite build 时,环境变量 VITE_SOME_KEY 的优先级最高。
  • .env 类文件会在 Vite 启动一开始时被加载,而改动会在重启服务器后生效。



获取环境变量

在服务端:

我们需要使用 loadEnv(mode, envDir[, root]) 获取环境变量,参数:① mode-构建模式、 ② envDir-环境变量的配置文件所在目录、 ③ root-环境变量配置文件的根文件名,默认为 .env

可以使用 process.cwd() 获取 envDir,该函数返回 node 的工作目录,一般为项目的根目录

调用 loadEnv 方法,vite 会:
① 到 envDir 目录下,找到 root 文件并解析
② 到 envDir 目录下,找到 ${root}.${mode} 文件并解析

import { defineConfig, loadEnv } from 'vite';

export default defineConfig(({ command, mode }) => {
    const env = loadEnv(mode, process.cwd());
    console.log('env', env); // env { VITE_VARIATE: '1' }
});

在客户端:

Vite 在 import.meta.env 对象上暴露环境变量,这里有一些在所有情况下都能使用的内建变量:

  1. MODE:{string} 应用运行的模式
  2. BASE_URL:{string} 部署应用时的基本 URL,由 base 配置项决定
  3. PROD:{boolean} 应用是否运行在生产环境
  4. DEV:{boolean} 应用是否运行在开发环境
  5. SSR:{boolean} 应用是否运行在 server 上

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

加载的环境变量通过 import.meta.env 以 [字符串] 形式暴露给客户端源码。

为了防止意外地将一些环境变量泄漏到客户端,只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。

我们可以在 vite 配置文件中通过 envPrefix 配置项更改这个 [校验前缀]:

import { defineConfig } from 'vite';

export default defineConfig({
    envPrefix: 'ENV_', // 将前缀更改为 `ENV_`
});

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15496.html
标签
评论
发布的文章

HTML5 地理定位

2024-08-20 09:08:58

HTML5 的真相(一)

2024-08-20 09:08:31

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!