访问process.env可以在很多方面为您提供帮助：

• 根据Quasar模式 (SPA/PWA/Cordova/Electron)区分运行时程序
• 根据运行开发或生产构建，区分运行时程序
• 在构建时根据终端环境变量向其添加标志

Quasar CLI提供的值

例子

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.js文件将自己的定义添加到process.env。

但首先，这里需要理解两个概念。/quasar.config.js文件本身中提供的来自终端的环境变量，以及传递给UI代码的环境变量。

// quasar.config.js

// 访问终端变量
console.log(process.env)

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

    build: {
      // 从quasar.conf.js传递到UI代码
      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 /quasar.config.js
build: {
  env: {
    API: ctx.dev
      ? 'https://dev.' + process.env.MY_API
      : 'https://prod.' + process.env.MY_API
  }
}

使用dotenv

如果你想使用.env文件，你可以使用dotenv包。下面是一个例子，它将env变量从.env文件传递到你的UI代码中。

$ yarn add --dev dotenv

然后在你的 /quasar.config.js中：

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

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

请注意，上面的方法将只传递.env文件中定义的内容，而没有其他内容。所以，在终端中定义的（例如：MY_API=api.com quasar build_）将不会被传递，也不会用来覆盖.env文件。

如果你想覆盖".env “中的内容，或者想让”.env "文件完全可有可无，你必须遵循另一种方法。如果你正在使用CI/CD、Docker等，你可能不希望只局限于.env文件。下面是一个例子：

// quasar.config.js

// 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的错误。

错误的用法

// quasar.config.js > 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 `quasar.config.js`

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))

配置错误

手册定义

// quasar.config.js > build
env: {
  FOO: 'hello',
}

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

dotenv

// quasar.config.js > 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