Quasar框架多环境配置实现方法咨询

Hey there! Since you're already familiar with how Vue CLI handles multi-environment builds, Quasar's approach is pretty similar—with just a few tweaks to hook into quasar.conf.js for publicPath configuration. Here's a step-by-step breakdown:

1. Create Environment Configuration Files #

First, create .env.[mode] files at your project root, just like you do in Vue CLI. These files will hold environment-specific variables:

• .env.development (default dev environment):

  NODE_ENV=development
  QUASAR_APP_ENV=development
  PUBLIC_PATH=/
  

• .env.staging:

  NODE_ENV=production
  QUASAR_APP_ENV=staging
  PUBLIC_PATH=/staging/
  

• .env.test:

  NODE_ENV=production
  QUASAR_APP_ENV=test
  PUBLIC_PATH=/test/
  

• .env.production (default prod environment):

  NODE_ENV=production
  QUASAR_APP_ENV=production
  PUBLIC_PATH=/
  

Note: Variables prefixed with QUASAR_APP_ (or VUE_APP_, for compatibility) will be injected into your client-side code. Use PUBLIC_PATH to define your environment-specific base URL.

2. Configure publicPath in quasar.conf.js #

Open your quasar.conf.js file and update the build section to use the PUBLIC_PATH from your environment variables:

module.exports = configure(function (ctx) {
  return {
    // ... other Quasar configs
    build: {
      // Dynamically set publicPath based on the current environment
      publicPath: process.env.PUBLIC_PATH || '/',
      // ... other build settings
    },
    // ...
  }
})

Quasar automatically loads the corresponding .env.[mode] file when you run/build with a specific mode, so process.env.PUBLIC_PATH will be available here.

3. Run/Build for Specific Environments #

Use the --mode flag with Quasar's CLI commands to target your desired environment:

• Development: quasar dev (uses .env.development by default)
• Staging Build: quasar build --mode staging
• Test Build: quasar build --mode test
• Production: quasar build (uses .env.production by default)

4. Access Environment Variables in Client Code #

If you need to reference environment-specific values in your components or plugins, use the prefixed variables you defined. For example:

<template>
  <div>Current Environment: {{ currentEnv }}</div>
</template>

<script>
export default {
  computed: {
    currentEnv() {
      return process.env.QUASAR_APP_ENV
    }
  }
}
</script>

That's it! This setup mirrors the Vue CLI workflow you're used to, while letting you customize publicPath and other settings per environment in Quasar.

内容的提问来源于stack exchange，提问作者DonSaada