處理 process.env | Quasar 框架

Quasar CLI with Vite - @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 檔案中定義
您傳遞至 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 環境變數的值結合使用

# 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 檔案中的環境變數傳遞至您的 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. 設定錯誤