.env.local
- 用途:.env.local 通常用于存储本地开发环境中的环境变量。这些变量可能包括敏感数据或特定于单个开发者的设置,不应该被提交到版本控制系统中。
- 优先级:在大多数框架中,.env.local 文件中的变量会覆盖其他 .env 文件中的同名变量。这意味着你可以在本地环境中覆盖共享环境变量。
- 环境:它只在本地开发环境中有效,不应该在生产环境中使用。
使用场景
- 存储数据库的本地连接字符串
- 特定于开发者的 API 密钥等。
- 转发不同的云端开发机地址、端口
shell
# .env.local
# VITE_PROXY_TARGET="http://10.*.**.33:8888"
VITE_PROXY_TARGET="http://localhost:8888"
vite.config.js
js
import React from "@vitejs/plugin-react";
import { join } from "path";
import { defineConfig, loadEnv } from "vite";
const mode = process.env.NODE_ENV;
const rootDir = process.cwd();
const env = loadEnv(mode, rootDir, "VITE");
export default defineConfig({
plugins: [React()],
build: {
minify: env.VITE_MINIFY == "true", // 禁用混淆
},
resolve: {
alias: {
"@": join(__dirname, "src"),
},
},
server: {
proxy: {
"/ros": {
target: env.VITE_PROXY_TARGET,
changeOrigin: true,
ws: true,
},
},
},
},
});
在这个给定的代码片段中,mode 和 rootDir 是两个变量,它们分别获得了当前进程环境的一些特定信息。
mode:
mode 变量通过读取 process.env.NODE_ENV 获得。在Node.js环境中,process.env 是一个包含用户环境信息的对象。NODE_ENV 是一个约定俗成的环境变量,通常用来指明程序运行的模式。最典型的值是:
- "development":开发模式。通常意味着应用处于开发阶段,不会进行代码压缩,可能包括更详细的日志输出。
- "production":生产模式。表示应用正在生产环境中运行。代码可能被压缩和优化,日志输出可能减少以提升性能。
- "test":测试模式。通常在自动化测试时使用。
rootDir:
rootDir:
变量通过调用 process.cwd() 获得。process.cwd() 返回Node.js进程的当前工作目录,即启动Node.js进程时所在的文件夹的路径。这个目录是执行Node.js命令(比如 node 或 npm start)时终端所在的位置,它可以是任何地方,不一定是Node.js应用或脚本所在的目录。
loadEnv:
loadEnv 函数看起来像是被用来加载和解析与Vite相关的环境变量。Vite是一个现代的前端开发与构建工具。在这个上下文中,"VITE"前缀可能意味着该函数将会加载所有以"VITE"开头的环境变量。例如,如果有一个环境变量叫做 VITE_API_URL,那么 loadEnv 函数可能用来获取和解析这个变量的值。
这个函数的参数是 mode、rootDir 和变量名前缀 "VITE"。这表明它会根据当前的运行模式和工作目录加载环境变量。
综上所述,mode 用于确定应用的运行环境,而 rootDir 表示运行命令的文件系统路径。
在vite配置中使用环境变量
环境变量通常可以从 process.env
获得。
注意 Vite 默认是不加载 .env 文件的,因为这些文件需要在执行完 Vite 配置后才能确定加载哪一个,举个例子,root 和 envDir 选项会影响加载行为。不过当你的确需要时,你可以使用 Vite 导出的 loadEnv 函数来加载指定的 .env 文件。
js
import { defineConfig, loadEnv } from 'vite'
export default defineConfig(({ command, mode }) => {
// 根据当前工作目录中的 `mode` 加载 .env 文件
// 设置第三个参数为 '' 来加载所有环境变量,而不管是否有 `VITE_` 前缀。
const env = loadEnv(mode, process.cwd(), '')
return {
// vite 配置
define: {
__APP_ENV__: JSON.stringify(env.APP_ENV),
},
}
})