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

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

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

结构

基础

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

module.exports = function (ctx) { // 也可以是异步的
  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.sass' : null, // looks for /src/css/app-spa.sass
    ctx.mode.cordova ? 'app-cordova.sass' : null  // looks for /src/css/app-cordova.sass
  ]
}

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

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

您也可以在返回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

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

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

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

配置选项

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

属性：css

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

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

属性：vendor

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

// quasar.config.js
return {
  vendor: {
    /* 可选的; 
       禁用vendor块: */ disable: true,

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

属性：framework

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

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

// quasar.config.js
return {
  // a list with all options (all are optional)
  framework: {
    // is using "auto" import strategy, you can also configure:
    autoImportComponentCase: 'pascal', // or 'kebab' (default) or 'combined'

    // For special cases outside of where auto-import can have an impact
    // (example: vue components written in .js files instead of .vue),
    // 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 选项. 看看完整列表的选项(在写这篇文章的时候，Webpack团队还没有更新webpack-dev-server v4的网站。)。 有些被Quasar CLI根据“Quasar dev”参数和Quasar模式覆盖，以确保正确的设置。 注意：如果您要代理开发服务器（即使用云IDE），请将“public”设置为公共应用程序URL。

大多数使用的属性是：

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

// quasar.config.js
// (syntax below requires @quasar/app-webpack v3.3+)

// opens Google Chrome
devServer: {
  open: {
    app: { name: 'google chrome' }
  }
}

// opens Firefox
devServer: {
  open: {
    app: { name: 'firefox' }
  }
}

// opens Google Chrome and automatically deals with cross-platform issues:
const open = require('open')

devServer: {
  open: {
    app: { name: open.apps.chrome }
  }
}

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

// quasar.config.js

devServer: {
  server: {
    type: 'https', // NECESSARY (alternative is type 'http')

    options: {
      // Use ABSOLUTE paths or path.join(__dirname, 'root/relative/path')
      key: "/path/to/server.key",
      pfx: "/path/to/server.pfx",
      cert: "/path/to/server.crt",
      ca: "/path/to/ca.pem",
      passphrase: 'webpack-dev-server' // do you need it?
    }
  }
}

您还可以配置自动打开远程Vue Devtools：

// quasar.config.js

devServer: {
  vueDevtools: true
}

HRM的Docker和WSL问题

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

一个权宜之计可以通过使用轮询模式来检查文件系统的变化来实现。 这可以通过以下方式启用：

// quasar.config.js

build: {
  // ...
  extendWebpack(cfg) {
    cfg.watchOptions = {
      aggregateTimeout: 200,
      poll: 1000,
    };
  },
// ...

属性：build

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

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

属性：htmlVariables

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

// quasar.config.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',
  electronMain: 'src-electron/electron-main.js',
  electronPreload: 'src-electron/electron-preload.js'
}

为dev/build设置env的示例

请参考我们文档中的添加到process.env部分。

处理Webpack配置

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