Quasar CLI with Webpack - @quasar/app-webpack
配置quasar.config.js

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

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

TIP

您会注意到,更改任何这些设置不需要您手动重新加载开发服务器。 Quasar检测是否可以通过热模块更换 注入更改,如果不能,则会自动重新加载开发服务器。 您不会丢失开发流程,因为您只需坐等Quasar CLI快速重新加载更改的代码,甚至保持当前状态。 这节省了大量的时间!

WARNING

/quasar.config.js由Quasar CLI构建系统运行,因此这些配置代码直接在Node下运行,而不是在应用程序的上下文中运行。这意味着你可以导入像’fs’,‘path’,'webpack’等模块。确保您在此文件编写的ES6功能受安装的Node版本(应该>=8.9.0)支持。

结构

基础

您会注意到/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 */
})

配置选项

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

属性类型描述
cssArray来自/src/css/的全局CSS/Sass/…文件,默认包含的主题文件除外。
preFetchBoolean启用PreFetch功能.
extrasArray@quasar/extras包中导入什么内容。 例: [‘material-icons’, ‘roboto-font’, ‘ionicons-v4’]
vendorObject向vendor块添加/删除文件/第三方库: { add: […], remove: […] }.
supportTSBoolean/Object增加TypeScript支持. 更多信息
htmlVariablesObject添加可在index.template.html中使用的变量。
frameworkObject/String导入哪个Quasar组件/指令/插件,选择哪个Quasar语言包,使用Quasar组件的哪个Quasar图标集。
animationsObject/String导入哪个CSS动画。 例: [‘bounceInLeft’, ‘bounceOutRight’]
devServerObjectWebpack devServer选项。 根据您使用的Quasar模式覆盖某些属性,以确保正确的配置。注意:如果您要代理开发服务器(即使用云IDE),请将“public”设置为你的公共应用程序URL。
buildObject构建配置。
sourceFilesObject更改应用部分的默认名称.
cordovaObjectCordova特定配置
capacitorObjectQuasar CLI Capacitor特定配置
pwaObjectPWA特定配置
ssrObjectSSR特定配置.
electronObjectElectron特定配置

属性: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。

大多数使用的属性是:

属性类型描述
portNumberdev server端口
hostStringdev server使用的本地IP/主机名
openBoolean/String除非将其设置为“false”,否则Quasar将打开一个自动指向开发服务器地址的浏览器。 适用于SPA,PWA和SSR模式。 如果指定String,请参阅下面的说明。
proxyObject/Array当你有一个独立的API后端开发服务器,而你想在同一个域名上发送API请求时,代理一些URL会很有用。
devMiddlewareObject提供给webpack-dev-middleware v4的配置
httpsBoolean/Object使用HTTPS而不是HTTP
onBeforeSetupMiddlewareFunction在webpack-dev-server应用自己的配置之前配置开发中间件。
onAfterSetupMiddlewareFunction在webpack-dev-server应用自己的配置后配置开发中间件。

使用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

属性类型描述
transpileBoolean启用或禁用Babel transpiling.
transpileDependenciesArray of Regex如果“transpile”设置为“false”,则不适用。 添加使用Babel进行转换的依赖项(来自node_modules,默认情况下不会被转换)。 例: [ /my-dependency/, ...]
showProgressBoolean编译时显示进度条。
transformAssetUrlsObject添加对自定义标记属性的引用资源的支持。例如: { 'my-img-comp': 'src', 'my-avatar': [ 'src', 'placeholder-src' ]}
extendWebpack(cfg)FunctionQuasar CLI生成的扩展Webpack配置。 等同于chainWebpack(),但您可以直接访问Webpack配置对象。
chainWebpack(chain)FunctionQuasar CLI生成的扩展Webpack配置。 等同于extendWebpack(),但改为使用webpack-chain。
beforeDev({ quasarConf })Function在运行$ quasar dev命令之前准备外部服务,比如启动一些后端或应用所依赖的任何其他服务。 可以使用async/await或直接返回Promise。
afterDev({ quasarConf })Functionquasar开发服务器启动后($ quasar dev)运行钩子。 此时,开发服务器已启动,如果您希望对其执行某些操作则可用这个方法。 可以使用async/await或直接返回Promise。
beforeBuild({ quasarConf })Function在Quasar构建用于生产环境的应用($ quasar build)之前运行钩子。 此时,尚未创建redistributables文件夹。 可以使用async/await或直接返回Promise。
afterBuild({ quasarConf })Function在Quasar构建用于生产环境的应用($ quasar build)之后运行钩子。 此时,distributables文件夹已创建,如果您希望对其执行某些操作,则可用。 可以使用async/await或直接返回Promise。
onPublish(opts)Function在Quasar构建用于生产环境的应用并执行afterBuild挂钩(如果指定)之后,如果请求发布($ quasar build -P),则运行挂钩。 可以使用async/await或直接返回Promise。 opts{arg, distDir}形式的对象,其中“arg”是提供给-P的参数(如果有的话)。
publicPathString部署时的公共路径。
appBaseString使用您的自定义值强制应用基本标签;仅在您确实知道自己在做什么的情况下进行配置,否则您可以轻松破坏应用程序。 强烈建议您保留由@quasar/app-webpack计算的结果。
vueRouterBaseString用您的自定义值强制应用vue router base;仅在您确实知道自己在做什么的情况下进行配置,否则您可以轻松破坏应用程序。 强烈建议您保留由@quasar/app-webpack计算的结果。
vueRouterModeString设置Vue路由器模式:‘hash’或’history’。 请明智选择。 历史记录模式也需要在部署Web服务器上进行配置。
htmlFilenameString默认是’index.html’.
ssrPwaHtmlFilenameString用于SSR+PWA模式。默认值为’offline.html’。
productNameString默认值取自package.json> productName字段。
distDirStringQuasar CLI生成可分发包的目录,对应项目根目录的相对路径。 默认是’dist/{ctx.modeName}'。 适用于除Cordova (强制生成到src-cordova/www目录)以外的所有模式。
ignorePublicFolderBoolean忽略/public文件夹。如果你依赖于一个statics文件夹,那么你需要自己配置它(在Quasar之外或者通过extendedweback/chainWebpack),所以确保你知道你在做什么。
devtoolStringSource map策略使用。
envObject将属性添加到process.env,您可以在您的网站/应用程序JS代码中使用它。 每个属性都需要JSON编码。 例如:{SOMETHING:JSON.stringify(‘someValue’)}。
gzipBoolean使用Gzip压缩可分发包。 当您提供内容的网络服务器没有gzip功能时很有用。
analyzeBoolean/Object使用webpack-bundle-analyzer显示构建包的分析。 如果用作对象,则表示webpack-bundle-analyzer配置对象。
vueCompilerBoolean包括vue runtime + compiler版本,而不是默认的Vue运行时版本
uglifyOptionsObject缩小选项。 完整清单.
vueLoaderOptionsObjectvue-loader的选项(compilerOptions, compiler, transformAssetUrls, 等等)。
scssLoaderOptionsObject提供给sass-loader.scss文件的选项。例如:scssLoaderOptions: { additionalData: '@import “src/css/abstracts/_mixins.scss”; ’ }
sassLoaderOptionsObject.sass文件提供sass-loader的选项。
stylusLoaderOptionsObject提供给’stylus-loader`的选项.
lessLoaderOptionsObject提供给’less-loader`的选项。

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

属性类型描述
extractCSSBoolean从Vue文件中提取CSS
sourceMapBoolean使用 source maps
minifyBoolean压缩代码(html,js,css)

例如,如果运行“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文档页面。