处理 process.env | Quasar 框架

Quasar CLI 与 Webpack - @quasar/app-webpack

处理 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`

示例

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 添加您自己的定义。

但首先，这里需要理解两个概念。来自终端的 env 变量在 /quasar.config 文件本身中可用，以及您传递给 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 错误。

错误用法

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. 示例

4. 剥离代码

5. 基于 process.env 导入

6. 添加到 process.env

7. 故障排除

7.1. 错误用法

7.2. 错误配置