小白学 VUE 系列之全局-cli-配置 vue.config.js

vue.config.js

vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。

// vue.config.js
module.exports = {
  // 选项...
}

配置参数

  • baseUrl 已停用,请使用publicPath

  • publicPath 部署应用包时的基本 URL

这个值也可以被设置为空字符串 ('') 或是相对路径 ('./'),这样所有的资源都会被链接为相对路径,这样打出来的包可以被部署在任意路径,也可以用在类似 Cordova hybrid 应用的文件系统中。

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}
  • outputDir 当运行 vue-cli-service build 时生成的生产环境构建文件的目录

  • assetsDir 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。

  • indexPath 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。

  • filenameHashing 生成的静态资源在它们的文件名中包含了 hash

默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。然而,这也要求 index 的 HTML 是被 Vue CLI 自动生成的。如果你无法使用 Vue CLI 生成的 index HTML,你可以通过将这个选项设为 false 来关闭文件名哈希

  • pages 配置页面

在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。其值应该是一个对象,对象的 key 是入口的名字,value 是:

module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时,
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在这个页面中包含的块,默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 当使用只有入口的字符串格式时,
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话,就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
    subpage: 'src/subpage/main.js'
  }
}
  • lintOnSave 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。
  • runtimeCompiler 是否使用包含运行时编译器的 Vue 构建版本
  • transpileDependencies 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖,可以在这个选项中列出来
  • productionSourceMap 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建
  • crossorigin 设置生成的 HTML 中 <link rel="stylesheet"><script> 标签的 crossorigin 属性
  • integrity
  • configureWebpack 如果这个值是一个对象,则会通过 webpack-merge 合并到最终的配置中
  • chainWebpack 是一个函数,会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
  • css.sourceMap 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能
  • css.loaderOptions CSS加载器

更多查看 https://cli.vuejs.org/zh/config/

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。