处理 process.env | Quasar 框架

使用 Vite 的 Quasar CLI - @quasar/app-vite

处理 process.env

使用 process.env 可以帮助你以多种方式

根据 Quasar 模式（SPA/PWA/Cordova/Electron）区分运行时过程
根据是否运行开发或生产构建来区分运行时过程
在构建时根据终端环境变量向其添加标志

Quasar CLI 提供的值

`process∙env∙<name>`	类型	含义
`DEV`	布尔值	代码在开发模式下运行
`PROD`	布尔值	代码在生产模式下运行
`DEBUGGING`	布尔值	代码在开发模式下运行或设置了 `--debug` 标志用于生产模式
`CLIENT`	布尔值	代码在客户端运行（不在服务器上）
`SERVER`	布尔值	代码在服务器上运行（不在客户端上）
`MODE`	字符串	Quasar CLI 模式（`spa`、`pwa` 等）
`NODE_ENV`	字符串	有两个可能的值：`production` 或 `development`

Vite 内置的“.env”

更多信息这里。

示例

if (process.env.DEV) {
  console.log(`I'm on a development build`)
}

// process∙env∙MODE is the <mode> in
// "quasar dev/build -m <mode>"
// (defaults to 'spa' if -m parameter is not specified)

if (process.env.MODE === 'electron') {
  const { BrowserWindow } = require('@electron/remote')
  const win = BrowserWindow.getFocusedWindow()

  if (win.isMaximized()) {
    win.unmaximize()
  }
  else {
    win.maximize()
  }
}

剥离代码

编译你的网站/应用程序时，根据 process.env 的 if () 分支会被评估，如果表达式为 false，它们会被从文件中剥离。示例

if (process.env.DEV) {
  console.log('dev')
}
else {
  console.log('build')
}

// running with "quasar dev" will result in:
console.log('dev')
// while running with "quasar build" will result in:
console.log('build')

请注意，上面的 if 会在编译时被评估并完全剥离，从而产生更小的包。

基于 process.env 导入

你可以将你在上一节中学到的内容与动态导入结合起来

if (process.env.MODE === 'electron') {
  import('my-fancy-npm-package').then(package => {
    // notice "default" below, which is the prop with which
    // you can access what your npm imported package exports
    package.default.doSomething()
  })
}

添加到 process.env

你可以通过 /quasar.config 文件向 process.env 添加你自己的定义。

理解不同类型的环境变量非常重要。

在 /quasar.config 文件中定义的来自终端的 env 变量
传递给 UI 代码的环境变量

// Accessing terminal variables
console.log(process.env)

module.exports = function (ctx) {
  return {
    // ...

    build: {
      // passing down to UI code from the quasar.config file
      env: {
        API: ctx.dev
          ? 'https://dev.api.com'
          : 'https://prod.api.com'
      }
    }
  }
}

然后，在你的网站/应用程序中，你可以访问 process∙env∙API，它将指向上面两个链接中的一个，具体取决于开发或生产构建类型。

你甚至可以将其与来自 quasar dev/build env 变量的值结合起来

# we set an env variable in terminal
$ MY_API=api.com quasar build

// then we pick it up in the /quasar.config file
build: {
  env: {
    API: ctx.dev
      ? 'https://dev.' + process.env.MY_API
      : 'https://prod.' + process.env.MY_API
  }
}

使用 dotenv

如果你希望使用 .env 文件，你可以使用 dotenv 包。以下是一个将 env 变量从 .env 文件传递到 UI 代码的示例

Yarn

NPM

PNPM

Bun

$ yarn add --dev dotenv

然后，在你的 /quasar.config 文件中

build: {
  env: require('dotenv').config().parsed
}

请务必阅读 dotenv 文档并在 Quasar CLI 项目的根目录中创建必要的 .env 文件。

请注意，上述方法只会传递 .env 文件中定义的内容，而不会传递其他任何内容。因此，在终端中定义的内容（例如 MY_API=api.com quasar build）不会被传递，也不会用于覆盖 .env 文件。

如果你希望能够覆盖 .env 中的内容，或者希望使 .env 文件完全可选，则必须遵循另一种方法。如果你正在使用 CI/CD、Docker 等，你可能不希望受限于 .env 文件。这是一个示例

// This will load from `.env` if it exists, but not override existing `process.env.*` values
require('dotenv').config()

// process.env now contains the terminal variables and the ones from the .env file
// Precedence:
//   1. Terminal variables (API_URL=https://api.com quasar build)
//   2. `.env` file
// If you want .env file to override the terminal variables,
// use `require('dotenv').config({ override: true })` instead

return {
// ...
  build: {
    env: {
      // You have to manually define all the variables you want to pass in
      API_URL: process.env.API_URL,
      // ...
    }
  }
// ...

故障排除

如果你错误地访问变量或配置错误，则浏览器控制台中可能会出现 process is not defined 错误。

错误用法

build: {
  env: {
    FOO: 'hello',
  }
}

const { FOO } = process.env // ❌ It doesn't allow destructuring or similar
process.env.FOO             // ✅ It can only replace direct usage like this

function getEnv(name) {
  return process.env[name] // ❌ It can't analyze dynamic usage
}

console.log(process)     // ❌
console.log(process.env) // ❌
// If you want to see a list of available env variables,
// you can log the object you are passing to `build > env` inside the `quasar.config` file

console.log(process.env.FOO) // ✅
console.log(process.env.foo) // ❌ Case sensitive
console.log(process.env.F0O) // ❌ Typo in the variable name (middle o is 0(zero))

错误配置

手动定义

build: {
  env: {
    FOO: 'hello',
  }
}

console.log(process.env.FOO) // ✅
console.log(process.env.BAR) // ❌ It's not defined in `build > env`

dotenv

build: {
  env: require('dotenv').config(/* ... */).parsed
}

如果 .env 不存在或文件名中有错别字

console.log(process.env.FOO) // ❌ The .env file is not loaded, this will fail

如果 .env 文件存在且名称正确，并且具有以下内容

FOO=hello

console.log(process.env.FOO) // ✅ It's loaded correctly from the `.env` file
console.log(process.env.BAR) // ❌ It's not defined in the `.env` file

发现错误？在浏览器中编辑此页面

1. 简介

2. Quasar CLI 提供的值

3. Vite 内置的“.env”

4. 示例

5. 剥离代码

6. 基于 process.env 导入

7. 添加到 process.env

8. 故障排除

8.1. 错误用法

8.2. 错误配置