Quasar CLI with 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 模式 (spapwa、 …)
NODE_ENV字符串有两个可能的值:productiondevelopment

例子

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