處理 process.env | Quasar Framework

搭配 Webpack 的 Quasar CLI - @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. 設定錯誤