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文档页面。