配置quasar.conf.js

quasar入门套件利用底层一些非常棒的工具，如Webpack。幸运的是，配置底层工具的复杂性是由Quasar CLI管理的，它为您完成繁重的工作。因此，为了使用Quasar，你甚至不需要知道Webpack。

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

您会注意到，更改任何这些设置不需要您手动重载开发服务器。Quasar检测更改是否可以通过“热模块重载”注入，如果不能，它将为您重载开发服务器。开发流程不会中断，当Quasar CLI快速处理它时，您只需要坐着。

/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,
    theme: { mat: true },
    themeName: 'mat',
    mode: { spa: true },
    modeName: 'spa',
    target: {},
    targetName: undefined,
    arch: {},
    archName: undefined,
    debug: undefined
  }

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

这意味着，作为一个例子，您可以在使用Quasar Material主题构建时加载一个字体，并在使用Quasar iOS主题构建时选择另一个字体。

module.exports = function (ctx) {
  extras: [
    ctx.theme.mat
      ? 'roboto-font' // 使用Material主题构建
      : null // 未使用Material主题构建, 所以是iOS主题
  ]
}

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

module.exports = function (ctx) {
  css: [
    ctx.mode.spa ? 'app-spa.styl' : null, // 指向/src/css/app-spa.styl
    ctx.mode.cordova ? 'app-cordova.styl' : null  // 指向/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)
  }
}

可能性是无止境的。

配置选项

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

属性 类型 描述
css Array 来自/src/css/的全局CSS/Stylus/…文件，默认包含的主题文件除外。 示例：[‘app.styl’]（引用/src/css/app.styl）
extras Array 从quasar-extras包中导入什么内容。 例： [‘material-icons’, ‘roboto-font’, ‘ionicons’]
supportIE Boolean 增加IE11+支持.
framework Object/String 导入哪个Quasar组件/指令/插件，选择哪个Quasar I18n语言包,使用Quasar组件的哪个图标。 例： { components: [‘QBtn’, ‘QIcon’], directives: [‘TouchSwipe’], plugins: [‘Notify’], iconSet: ‘fontawesome’, i18n: ‘de’ }.请注意，为了使iconSet工作，您还需要告诉Quasar通过extras属性嵌入该图标包。
animations Object/String 导入哪个CSS动画。 例： [‘bounceInLeft’, ‘bounceOutRight’]
devServer Object Dev server 选项。 根据您使用的Quasar模式覆盖某些属性，以确保正确的配置。
build Object 构建配置。 请参阅下面的部分。
sourceFiles Object (v0.16+) 更改应用部分的默认名称. 更多信息
cordova Object Cordova特定配置.
pwa Object PWA特定配置.
electron Object Electron特定配置.

devServer属性

看看完整列表的选项。 有些被Quasar CLI根据“Quasar dev”参数和Quasar模式覆盖，以确保正确的设置。

大多数使用的属性是：

属性 类型 描述
port Number dev server端口
host String dev server使用的本地IP/主机名
open Boolean 打开浏览器自动指向dev server地址。 适用于SPA和PWA模式。

build属性

属性 类型 描述
extendWebpack(cfg) Function 由Quasar CLI生成的扩展Webpack配置。 等同于chainWebpack()，但您可以直接访问Webpack配置对象。
chainWebpack(chain) Function (CLI v0.16.2+) 扩展Webpackk配置 由Quasar CLI生成。 等同于extendWebpack()，但改为使用webpack-chain。
publicPath String 部署时的公共路径。
vueRouterMode String 设置Vue路由器模式：’hash’或’history’。 请明智选择。 历史记录模式也需要在部署Web服务器上进行配置。
htmlFilename String 默认是’index.html’.
productName String 默认值取自package.json> productName字段。
distDir String Quasar CLI生成可分发包的目录，对应项目根目录的相对路径。 默认是’dist/{ctx.modeName}-{ctx.themeName}’。 适用于除Cordova (强制生成到src-cordova/www目录)以外的所有模式。
devtool String Source map策略使用。
env Object 将属性添加到process.env，您可以在您的网站/应用程序JS代码中使用它。 每个属性都需要JSON编码。 例如：{SOMETHING：JSON.stringify(‘someValue’)}。
gzip Boolean 使用Gzip压缩可分发包。 当您提供内容的网络服务器没有gzip功能时很有用。
scopeHoisting Boolean 默认值：“true”。 使用 Webpack范围提升功能 来获得稍微更好的运行时性能。
analyze Boolean/Object 使用webpack-bundle-analyzer显示构建包的分析。 如果用作对象，则表示webpack-bundle-analyzer配置对象。
vueCompiler Boolean (v0.15.7+) 包括vue runtime + compiler版本，而不是默认的Vue运行时版本
uglifyOptions Object (v0.16+) 缩小选项。 完整清单.
preloadChunks Boolean (v0.16+) 默认为“true”。 浏览器空闲时预加载块以改善用户以后导航到其他页面的体验。

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

属性 类型 描述
extractCSS Boolean 从Vue文件中提取CSS
sourceMap Boolean 使用 source maps
minify Boolean 压缩代码（html，js，css）
webpackManifest Boolean 改进缓存策略。 使用一个webpack清单文件来避免在每个版本的vendor块上更改散列导致缓存崩溃。

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

sourceFiles属性

Quasar v0.16+

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

// 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)
    }
}

扩展Webpack配置对象

这是通过build>extendWebpack()函数实现的。 添加Webpack加载器的示例。

// quasar.conf.js
build: {
  extendWebpack (cfg) {
    // 我们做就地(in-place)更改
    cfg.module.rules.push({
      test: /\.json$/,
      loader: 'json-loader'
    })

    // 不需要返回任何东西
  }
}

如果您使用的是Quasar CLI v0.16.2 +，那么您还有另一种方法：通过build> chainWebpack（chain）来篡改生成的Webpack配置。 不同之处在于它更容易，因为您将使用[webpack-chain]（https://github.com/mozilla-neutrino/webpack-chain）来完成它。

等效方法，使用chainWebpack(chain)：

// quasar.conf.js
build: {
  chainWebpack (chain) {
    chain.module.rule('json')
      .test(/\.json$/)
      .use('json-loader')
        .loader('json-loader')

    // 不需要返回任何东西
  }
}

注意
1.在WebSphereWebpack()之前执行chainWebpack()。
2.以上两个例子是等效的。 不要使用这两种方法来篡改同样的东西！

将您自己的别名添加到Webpack

要添加您自己的别名，您可以扩展webpack配置并将其与现有别名合并。
使用path.resolve助手方法来解析你想要的别名的路径。

// quasar.conf.js
build: {
  extendWebpack (cfg) {
   cfg.resolve.alias = {
    ...cfg.resolve.alias, // 添加现有的别名，

    // 添加你自己的别名就像这样：
    myalias: path.resolve(__dirname, './src/somefolder'),
  }
}

等效方法，使用chainWebpack():

// quasar.conf.js
build: {
  chainWebpack (chain) {
    chain.resolve.alias
      .set('myalias', path.resolve(__dirname, './src/somefolder'))
  }
}

目录结构 构建命令