process.env处理

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

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

Quasar CLI提供的值

名称输入意义
process.env.DEV布尔在开发模式下运行的代码
process.env.PROD布尔在生产模式下运行的代码
process.env.DEBUGGING布尔(@quasar/app v2.1.3+) 代码在开发模式下运行,或者为生产模式设置了--debug标志
process.env.CLIENT布尔在客户端上(不在服务器上)运行的代码
process.env.SERVER布尔在服务器上(不在客户端上)运行的代码
process.env.MODE字符串Quasar CLI 模式 (spapwa、 …)
process.env.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 { remote } = require('electron')
  const win = remote.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.conf.js文件将自己的定义添加到process.env

// quasar.conf.js

build: {
  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.conf.js
build: {
  env: {
    API: ctx.dev
      ? 'https://dev.' + process.env.MY_API
      : 'https://prod.' + process.env.MY_API
  }
}