.env 文件(读作 “dotenv”)是一种简单的文本文件,用于存储软件项目的环境变量。你可以将敏感信息或配置设置放在这个文件中,而不是直接硬编码在源代码里。
其中定义的变量会被转换为 import.meta.env.<VAR_NAME> 并在构建时替换。
TIP
在继续之前,建议先熟悉 Quasar CLI 如何处理 import.meta.env。
为什么使用 .env 文件?
- 安全性:它能保护敏感数据的安全,如数据库密码、API 密钥和密钥令牌。因为 .env 文件不会被纳入版本控制(如 GitHub),你的密钥不会暴露给公众或团队中的所有人。
- 可移植性:它允许你的应用根据环境(开发、测试或生产)表现不同的行为,而无需修改代码。你只需为每个环境替换 .env 文件即可。
- 简洁性:它将配置集中到一个易于阅读的文件中。
它长什么样?
.env 文件使用简单的 KEY=VALUE 格式。等号周围没有空格,通常只有当值包含空格时才需要引号。
# 数据库配置
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=super_secret_password
DB_PORT=5432
# API 密钥
STRIPE_API_KEY=sk_test_123456789
NODE_ENV=developmentDotenv 的黄金法则
永远不要将 .env 文件提交到版本控制中。
你必须立即将 .env 添加到项目的 .gitignore 文件中。如果你不小心将包含真实 API 密钥的 .env 文件推送到公共仓库,机器人可以在几秒钟内抓取这些密钥并利用它们。
相反,你可能想在项目目录中包含一个 .env.example 或 .env.template 文件。这个文件包含键名但留空值或填入虚拟数据,向其他开发者展示项目运行需要哪些变量:
DB_HOST=
DB_USER=
DB_PASSWORD=
DB_PORT=
STRIPE_API_KEY=
NODE_ENV=用法
Quasar CLI Dotenv 文件
以下文件会被自动检测和使用(顺序很重要):
.env # 所有情况下都会加载
.env.local # 仅在开发时加载,被 git 忽略…其中"被 git 忽略"假设项目目录是在此包发布后创建的,否则请将 .env.local 添加到你的 /.gitignore 文件中。
出于安全考虑,为了只暴露明确意图的变量,Quasar CLI 会过滤掉不以 QCLI_ 前缀开头的变量名(针对暴露给客户端的代码),同时保留所有变量给后端代码(例如:客户端无法直接查看的 SSR 服务端代码)。这个前缀可以通过 /quasar.config 文件更改。
# 不会暴露给客户端代码,但会暴露给后端;
# 它不以 QCLI_ 前缀开头:
SOME_VAR=content
# 这会被嵌入到后端和客户端代码中,
# 因为它以 QCLI_ 前缀开头:
QCLI_SOME_VAR=contentimport.meta.env.SOME_VAR // ❌ 在客户端代码中不可用
import.meta.env.QCLI_SOME_VAR // ✅ 在客户端代码中可用配置 Dotenv 文件
build: {
env: {
/**
* 出于安全原因,只有带此前缀的变量(来自 env 文件和 Node.js process.env)
* 才会暴露给发送到客户端的代码。
* 客户端应用代码包括 Electron main 和 preload 脚本,
* 因为它们也会被发送到客户端。
*
* 暴露给客户端应用代码的变量不应包含敏感信息,如 API 密钥。
*
* 避免设置为 'QUASAR_' 以免与 Quasar 自身的环境变量冲突。
*
* 设置为空字符串将使用默认值 (QCLI_)。
*
* @default 'QCLI_'
*/
clientPrefix?: string | string[];
/**
* 设置此前缀将过滤暴露给后端代码(如 SSR 服务端)的
* env 文件变量和 Node.js process.env 变量。
*
* 避免设置为 'QUASAR_' 以免与 Quasar 自身的环境变量冲突。
*
* @default ''
*/
backendPrefix?: string | string[];
/**
* Quasar CLI 查找 .env* 文件的目录。
* 可以是绝对路径或相对于项目根目录的路径。
*
* @default appPaths.appDir
*/
folder?: string | string[];
/**
* 额外要加载的 .env* 文件。
* 每个条目可以是绝对路径或相对于
* quasar.config > build > folder 的路径。
*
* @example ['.env.somefile', '../.env.someotherfile']
*/
file?: string | string[];
/**
* 过滤暴露给应用代码的 env 文件变量和 Node.js process.env 变量。
* 这不影响直接赋值给 quasar.config > build > define 属性的值。
*/
filter?: (
env: Record<string, string>,
type: "client" | "backend"
) => Record<string, string>;
}
}记住你可以使用 build > env > filter 函数进一步过滤不需要的键,甚至更改键的值:
build: {
env: {
filter (
originalEnv,
type // "client" | "backend"
) {
const newEnv = {}
for (const key in originalEnv) {
if (/* ...决定是否包含... */) {
newEnv[ key ] = originalEnv[ key ]
}
}
// 记得返回处理后的 env
return newEnv
}
}
}/quasar.config 文件自身的 Dotenv 文件
Quasar CLI 会检测 dotenv 文件并将其用于 /quasar.config 文件本身。但如果你想配置这个行为,需要编辑你的 /package.json:
"quasarCli": {
"quasarConfEnv": {
/**
* 设置此前缀将过滤暴露的 env 文件变量和 Node.js process.env 变量。
*
* 避免设置为 'QUASAR_' 以免与 Quasar 自身的环境变量冲突。
*
* @default ''
*/
"prefix": "",
/**
* Quasar CLI 查找 .env* 文件的目录。
* 可以是绝对路径或相对于项目根目录的路径。
*
* @default 项目根目录
*/
"folder": "."
/**
* 额外要加载的 .env* 文件。
* 每个条目可以是绝对路径或相对于
* quasar.config > build > folder 的路径。
*
* @example ['.env.somefile', '../.env.someotherfile']
*/
"file": []
}
}在 /quasar.config 文件中的用法,假设你在 /.env 中定义了 HTML_MY_VAR:
import { defineConfig } from '#q-app'
export default defineConfig(ctx => {
return {
htmlVariables: {
myVar: import.meta.env.HTML_MY_VAR // <-- 注意这里
}
}
})HMR(热模块重载)
添加/删除/修改 dotenv 文件(包括默认的和配置的)会立即生效,所以你不需要重启 Quasar CLI 开发服务器。