Quasar在它的引擎下使用了一些很棒的开发工具，比如Webpack。 Quasar的一大优点是它可以为您处理底层工具所需的大多数复杂配置。 因此，您甚至无需了解Webpack或任何其他开发工具即可使用Quasar。

那么你可以通过/quasar.conf.js来配置什么？

• 您将在您的网站/应用程序中使用的Quasar组件、指令和插件
• 默认的Quasar语言包
• 你想使用的图标库
• Quasar组件的默认的Quasar图标集
• 开发服务器端口、HTTPS模式、主机名等
• 你想使用的CSS动画
• 启动文件 列表（也决定了执行顺序) - 这是/src/boot中的文件，告诉你在安装根Vue组件之前如何初始化应用程序
• bundle中包含的全局CSS/Stylus/…文件
• PWA manifest 和 Workbox选项
• Electron打包器 和/或 Electron构建器
• IE11 +支持
• 扩展的Webpack配置

结构

基础

您会注意到/quasar.conf.js会导出一个函数，该函数接受ctx(context)参数并返回一个对象。这使您可以根据此上下文动态更改您的网站/应用配置：

module.exports = function (ctx) { // can be async too (@quasar/app v2.1+)
  console.log(ctx)

  // 输出到控制台的例子:
  {
    dev: true,
    prod: false,
    mode: { spa: true },
    modeName: 'spa',
    target: {},
    targetName: undefined,
    arch: {},
    archName: undefined,
    debug: undefined
  }

  // 根据这些参数上下文将会被创建
  // 当你运行"quasar dev"或"quasar build"时
}

这意味着，作为一个例子，您可以在构建特定模式（如PWA）时加载字体，并为其他模式选择另一个：

module.exports = function (ctx) {
  extras: [
    ctx.mode.pwa // we're adding only if working on a PWA
      ? 'roboto-font'
      : null
  ]
}

或者，您可以使用一个全局CSS文件用于SPA模式，使用另一个用于Cordova模式，同时避免为其他模式加载任何此类文件。

module.exports = function (ctx) {
  css: [
    ctx.mode.spa ? 'app-spa.styl' : null, // looks for /src/css/app-spa.styl
    ctx.mode.cordova ? 'app-cordova.styl' : null  // looks for /src/css/app-cordova.styl
  ]
}

或者，您可以将开发服务器配置为在端口8000上运行SPA模式，在端口9000上运行PWA模式或在端口9090上运行其他模式：

module.exports = function (ctx) {
  devServer: {
    port: ctx.mode.spa
      ? 8000
      : (ctx.mode.pwa ? 9000 : 9090)
  }
}

另外，从“@quasar/app”v2.1+开始，您现在可以在返回Quasar配置之前执行异步工作：

module.exports = async function (ctx) {
  const data = await someAsyncFunction()
  return {
    // ... use "data"
  }
}

// or:
module.exports = function (ctx) {
  return new Promise(resolve => {
    // some async work then:
    // resolve() with the quasar config
    resolve({
      //
    })
  })
}

可能性是无止境的。

IDE autocompletion

从v1.9开始，可以用configure()助手包装返回的函数，以获得更好的IDE自动完成体验（通过Typescript）：

const { configure } = require('quasar/wrappers')

module.exports = configure(function (ctx) {
  /* configuration options */
})

配置选项

让我们逐个采取每个选项：

属性：css

来自/src/css/的全局CSS/Stylus/…文件，默认包含的主题文件除外。

// quasar.conf.js
return {
  css: [
    'app.styl', // referring to /src/css/app.styl
    '~some-library/style.css' // referring to node_modules/some-library/style.css
  ]
}

属性：vendor

默认情况下，出于性能和缓存原因，来自node_modules的所有内容都将注入到vendor块中。 但是，如果您希望在此特殊块中添加或删除某些内容，您可以这样做：

// quasar.conf.js
return {
  vendor: {
    /* 可选的; @quasar/app v1.4.2+; 
       禁用vendor块: */ disable: true,

    add: [ 'src/plugins/my-special-plugin' ],
    remove: ['axios', 'vue$']
  }
}

属性：framework

@quasar/app v2 specs

告诉CLI要导入的Quasar组件/指令/插件，要使用的Quasar I18n语言包，用于Quasar组件的图标集等等。

只有当“all”设置为false时，才需要填充“components”和“directions”。

// quasar.conf.js
return {
  // a list with all options (all are optional)
  framework: {
    // Possible values for "importStrategy":
    // * 'auto' - Auto-import needed Quasar components & directives
    // * 'all'  - Import everything from Quasar
    //            (not treeshaking Quasar; biggest bundle size)
    importStrategy: 'auto',

    // is using "auto" import strategy, you can also configure:
    autoImportComponentCase: 'pascal', // or 'kebab' (default) or 'combined'

    // For special cases outside of where auto-import "auto" can have an impact
    // (like functional components as one of the examples),
    // you can manually specify Quasar components/directives to be available everywhere:
    //
    // components: [],
    // directives: [],

    // Quasar plugins
    plugins: ['Notify' /* ... */],

    // Quasar config
    // You'll see this mentioned for components/directives/plugins which use it
    config: { /* ... */ },

    iconSet: 'fontawesome-v6', // requires icon library to be specified in "extras" section too,
    lang: 'de', // Tell Quasar which language pack to use for its own components

    cssAddon: true // Adds the flex responsive++ CSS classes (noticeable bump in footprint)
  }
}

更多关于cssAddon参考这里.

属性：devServer

Webpack devServer 选项. 看看完整列表的选项。 有些被Quasar CLI根据“Quasar dev”参数和Quasar模式覆盖，以确保正确的设置。 注意：如果您要代理开发服务器（即使用云IDE），请将“public”设置为公共应用程序URL。

大多数使用的属性是：

使用open属性打开特定浏览器，而不是使用操作系统的默认浏览器（基于主机操作系统检查支持的值）：

// quasar.conf.js

devServer: {
  open: 'firefox'
}

在quasar.conf.js文件中设置devServer > https: true时，Quasar会自动为您生成SSL证书。 但是，如果您想自己为本地主机创建一个，请查看Filippo的博客文章。 然后你的quasar.conf.js > devServer > https应该看起来像这样：

// quasar.conf.js

const fs = require('fs')
// ...

devServer: {
  https: {
    key: fs.readFileSync('/path/to/server.key'),
    cert: fs.readFileSync('/path/to/server.crt'),
    ca: fs.readFileSync('/path/to/ca.pem'),
  }
}

从 @quasar/app v1.3.2 开始，您还可以配置自动打开远程Vue Devtools：

// quasar.conf.js

devServer: {
  vueDevtools: true
}

HRM的Docker和WSL问题

如果您正在使用Docker容器，您可能会发现HMR停止工作。HMR依赖于操作系统来提供有关更改的文件的通知，这些文件可能不适用于Docker容器。您可以通过添加以下内容将其更改为轮询：

devServer: {
  watchOptions: {
    poll: 1000
  }
}

属性：build

@quasar/app v2 specs

Quasar CLI根据dev/build命令和Quasar模式自动配置build的以下属性。 但是如果你想重写一些（确保你知道你在做什么)，你可以这样做：

例如，如果运行“quasar build --debug”，则无论您配置了什么，sourceMap和extractCSS都将设置为“true”。

属性：htmlVariables

@quasar/app v2 specs

您可以在src/index.template.html中定义然后引用变量，如下所示：

// quasar.conf.js
module.exports = function (ctx) {
  return {
    htmlVariables: {
      title: 'test name',
      some: {
        prop: 'my-prop'
      }
    }

然后（只是一个示例，向您展示如何引用上面定义的变量，在本例中为title）：

<!-- src/index.template.html -->
<%= title %>
<%= some.prop %>

属性：sourceFiles

如果必须，请使用此属性更改网站/应用程序的某些文件的默认名称。 所有路径必须相对于项目的根文件夹。

// default values:
sourceFiles: {
  rootComponent: 'src/App.vue',
  router: 'src/router',
  store: 'src/store',
  indexHtmlTemplate: 'src/index.template.html',
  registerServiceWorker: 'src-pwa/register-service-worker.js',
  serviceWorker: 'src-pwa/custom-service-worker.js',
  electronMainDev: 'src-electron/main-process/electron-main.dev.js',
  electronMainProd: 'src-electron/main-process/electron-main.js'
}

为dev/build设置env的示例

@quasar/app v2 specs

这里需要理解两个概念。在/quasar.conf.js文件本身可用的终端的环境变量以及传递给UI代码的环境变量。

// quasar.conf.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 env变量的值：

# 我们在终端设置一个env变量
$ MY_API=api.com quasar build

# 然后我们在/quasar.conf.js获取它
build: {
  env: {
    API: ctx.dev
      ? 'https://dev.' + process.env.MY_API
      : 'https://prod.' + process.env.MY_API
  }
}

使用dotenv

如果要使用.env文件，甚至可以使用dotenv包装。下面只是一个将env变量从终端直接传递到UI应用程序代码的示例：

$ yarn add --dev dotenv

然后在你的 /quasar.conf.js:

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

处理Webpack配置

深入分析处理Webpack文档页面。