为什么捐赠
API 浏览器
升级指南
NEW!
quasar.config 配置文件
从 Webpack 项目转换
浏览器兼容性
TypeScript 支持
目录结构
命令列表
CSS 预处理器
使用 VueRouter 进行页面路由
懒加载 - 代码分割
资源处理
Boot 文件
预取特性
API 代理
配置 Vite
处理 import.meta.env
Dotenv 文件支持
使用 Pinia 管理状态
代码检查与格式化
测试与审计
开发移动应用
Ajax 请求
开放开发服务器到公网
联系站长
Quasar CLI with Vite - @quasar/app-vite
Dotenv 文件支持

.env 文件(读作 “dotenv”)是一种简单的文本文件,用于存储软件项目的环境变量。你可以将敏感信息或配置设置放在这个文件中,而不是直接硬编码在源代码里。

其中定义的变量会被转换为 import.meta.env.<VAR_NAME> 并在构建时替换。

TIP

在继续之前,建议先熟悉 Quasar CLI 如何处理 import.meta.env

为什么使用 .env 文件?

  • 安全性:它能保护敏感数据的安全,如数据库密码、API 密钥和密钥令牌。因为 .env 文件不会被纳入版本控制(如 GitHub),你的密钥不会暴露给公众或团队中的所有人。
  • 可移植性:它允许你的应用根据环境(开发、测试或生产)表现不同的行为,而无需修改代码。你只需为每个环境替换 .env 文件即可。
  • 简洁性:它将配置集中到一个易于阅读的文件中。

它长什么样?

.env 文件使用简单的 KEY=VALUE 格式。等号周围没有空格,通常只有当值包含空格时才需要引号。

/.env

# 数据库配置
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=super_secret_password
DB_PORT=5432

# API 密钥
STRIPE_API_KEY=sk_test_123456789
NODE_ENV=development

Dotenv 的黄金法则

永远不要将 .env 文件提交到版本控制中。

你必须立即将 .env 添加到项目的 .gitignore 文件中。如果你不小心将包含真实 API 密钥的 .env 文件推送到公共仓库,机器人可以在几秒钟内抓取这些密钥并利用它们。

相反,你可能想在项目目录中包含一个 .env.example.env.template 文件。这个文件包含键名但留空值或填入虚拟数据,向其他开发者展示项目运行需要哪些变量:

/.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=content
用法示例

import.meta.env.SOME_VAR // ❌ 在客户端代码中不可用
import.meta.env.QCLI_SOME_VAR // ✅ 在客户端代码中可用

配置 Dotenv 文件

/quasar.config 文件

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 函数进一步过滤不需要的键,甚至更改键的值:

/quasar.config 文件

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:

/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

/quasar.config 文件示例

import { defineConfig } from '#q-app'

export default defineConfig(ctx => {
  return {
    htmlVariables: {
      myVar: import.meta.env.HTML_MY_VAR // <-- 注意这里
    }
  }
})

HMR(热模块重载)

添加/删除/修改 dotenv 文件(包括默认的和配置的)会立即生效,所以你不需要重启 Quasar CLI 开发服务器。