配置quasar.conf.js

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

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

TIP

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

WARNING

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

结构

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

可能性是无止境的。

配置选项

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

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

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

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

// quasar.conf.js
return {
  // a list with all options (all are optional)
  framework: {
    components: ['QBtn', 'QIcon' /* ... */],
    directives: ['TouchSwipe' /* ... */],
    plugins: ['Notify' /* ... */],

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

    iconSet: 'fontawesome', // 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参考这里.

自动导入功能

您还可以通过framework:{all}属性将Quasar CLI配置为自动导入正在使用的Quasar组件和指令:

// quasar.conf.js
framework: {
  // Possible values for "all":
  // * 'auto' - Auto-import needed Quasar components & directives
  //            (slightly higher compile time; next to minimum bundle size; most convenient)
  // * false  - Manually specify what to import
  //            (fastest compile time; minimum bundle size; most tedious)
  // * true   - Import everything from Quasar
  //            (not treeshaking Quasar; biggest bundle size; convenient)
  all: 'auto',

如果您设置all: 'auto'那么Quasar将自动为您导入组件和指令。 编译时间将略有增加,但是您无需在quasar.conf.js中指定组件和指令。 请注意,仍需要指定Quasar插件。

@quasar/app v1.1.2(以及quasar v1.1.3 +)开始,使用自动导入功能时,您还可以配置编写组件的方式:

// quasar.conf.js
framework: {
  all: 'auto',
  autoImportComponentCase: 'pascal' // or 'kebab' (default) or 'combined'

属性:devServer

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

大多数使用的属性是:

属性类型描述
portNumberdev server端口
hostStringdev server使用的本地IP/主机名
openBoolean/String除非将其设置为“false”,否则Quasar将打开一个自动指向开发服务器地址的浏览器。 适用于SPA,PWA和SSR模式。 如果指定String,请参阅下面的说明。
publicString应用程序的公共地址(用于反向代理)

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

属性:build

属性类型描述
transpileDependenciesArray of Regex添加使用Babel进行转换的依赖项(来自node_modules,默认情况下不会被转换)。 例: [ /my-dependency/, ...]
transformAssetUrlsObject(@quasar/app 1.3.4+) 添加对自定义标记属性的引用资源的支持。例如: { 'my-img-comp': 'src', 'my-avatar': [ 'src', 'placeholder-src' ]}
showProgressBoolean编译时显示进度条。
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部署时的公共路径。
forceDevPublicPathBoolean(@quasar/app 1.0.6+) 也在开发版本中强制使用自定义publicPath(仅适用于SPA和PWA模式)。 请确保这确实是您要查找的内容,并且您知道自己在做什么,否则不建议这样做。
appBaseString(@quasar/app 1.4.2+) 使用您的自定义值强制应用基本标签;仅在您确实知道自己在做什么的情况下进行配置,否则您可以轻松破坏应用程序。 强烈建议您保留由quasar/app计算的结果。
vueRouterBaseString(@quasar/app 1.4.2+) 用您的自定义值强制应用vue router base;仅在您确实知道自己在做什么的情况下进行配置,否则您可以轻松破坏应用程序。 强烈建议您保留由quasar / app计算的结果。
vueRouterModeString设置Vue路由器模式:‘hash’或’history’。 请明智选择。 历史记录模式也需要在部署Web服务器上进行配置。
htmlFilenameString默认是’index.html’.
productNameString默认值取自package.json> productName字段。
distDirStringQuasar CLI生成可分发包的目录,对应项目根目录的相对路径。 默认是’dist/{ctx.modeName}’。 适用于除Cordova (强制生成到src-cordova/www目录)以外的所有模式。
devtoolStringSource map策略使用。
envObject将属性添加到process.env,您可以在您的网站/应用程序JS代码中使用它。 每个属性都需要JSON编码。 例如:{SOMETHING:JSON.stringify(‘someValue’)}。
gzipBoolean使用Gzip压缩可分发包。 当您提供内容的网络服务器没有gzip功能时很有用。
scopeHoistingBoolean默认值:“true”。 使用 Webpack范围提升功能 来获得稍微更好的运行时性能。
analyzeBoolean/Object使用webpack-bundle-analyzer显示构建包的分析。 如果用作对象,则表示webpack-bundle-analyzer配置对象。
vueCompilerBoolean包括vue runtime + compiler版本,而不是默认的Vue运行时版本
uglifyOptionsObject缩小选项。 完整清单.
preloadChunksBoolean默认为“true”。 浏览器空闲时预加载块以改善用户以后导航到其他页面的体验。
scssLoaderOptionsObject.scss文件提供sass-loader的选项。
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)
webpackManifestBoolean改进缓存策略。 使用一个webpack清单文件来避免在每个版本的vendor块上更改散列导致缓存崩溃。

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

属性:htmlVariables

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

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

然后(只是一个示例,向您展示如何引用上面定义的变量,在本例中为title):

<!-- src/index.template.html -->
<%= htmlWebpackPlugin.options.title %>

属性: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的示例

build: {
  env: ctx.dev
    ? { // 在开发状态下我们拥有以下属性
      API: JSON.stringify('https://dev.api.com')
    }
    : { // 在构建状态(生产版本)下
      API: JSON.stringify('https://prod.api.com')
    }
}

然后,在您的网站/应用程序中,您可以访问process.env.API,它将根据开发或生产构建类型指向上述两个链接中的一个。

你甚至可以更进一步。 提供来自quasar dev/build env变量的值:

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

# 然后我们在/quasar.conf.js获取它
build: {
  env: ctx.dev
    ? { // 在开发状态下我们拥有以下属性
      API: JSON.stringify('https://dev.'+ process.env.MY_API)
    }
    : { // 在构建状态(生产版本)下
      API: JSON.stringify('https://prod.'+ process.env.MY_API)
    }
}

或者你可以使用我们的@quasar/dotenv@quasar/qenv应用扩展。

TIP

另请参阅处理process.env页面。

处理Webpack配置

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