说明

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。

  module.exports = {
    // 配置项...
  }

• publicPath
  默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。
• outputDir
  打包完成后，构建文件所放置的目录。默认为dist
• assetsDir
  放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
• indexPath
  指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
• filenameHashing
  是否关闭文件名哈希。默认时开启
• pages

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
  取值 boolean | 'warning' | 'default' | 'error' 可以配置ESlint的报错

  boolean	warning	default	error
  是否开启eslint	将 lint 错误输出为编译警告	lint 错误在开发时直接显示在浏览器中	把 lint 警告也输出为编译错误

• runtimeCompiler
  设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。

• transpileDependencies
  默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。
  处理一些兼容性问题可能会用到

• productionSourceMap
  生产环境的 source map

• crossorigin
  设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。

  crossorigin获取跨域脚本的错误信息
  需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。

• integrity
  设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 integrity 属性。

  验证资源的完整性 https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity
  需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。

• configureWebpack
  webpack的配置。会合并到最终的配置中。

  1. 添加插件

• chainWebpack
  通过 webpack-chain维护的配置。允许更细粒度的控制内部的配置。

  1. 修改某些Loader选项
  2. 添加新的Loader
  3. 替换loader
  4. 修改插件选项

• css.requireModuleExtension
  默认情况下，只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块。设置为 false 后你就可以去掉文件名中的 .module 并将所有的 *.(css|scss|sass|less|styl(us)?) 文件视为 CSS Modules 模块。

• extract
  是否将组件中的 CSS 提取至一个独立的 CSS 文件中、默认 生产环境下是 true，开发环境下是 false

• sourceMap
  是否为 CSS 开启 source map。 默认为 false

• loaderOptions
  向 CSS 相关的 loader 传递选项

• devServer
  开发过程中接触最多的配置项。同时功能也很强大。支持所有webpack-dev-server的配置项
  配置项： https://webpack.js.org/configuration/dev-server/

• parallel
  是否为 Babel 或 TypeScript 使用 thread-loader

• pwa
  渐进式 Web 应用会 在桌面和移动设备上提供可安装的、仿应用的体验，可直接通过 Web 进行构建和交付。它们是快速、可靠的 Web 应用。最重要的是，它们是适用于任何浏览器的 Web 应用。
  该选项就是向传递pwa插件的一些配置项

  pwa: {
    name: 'My App',
    themeColor: '#4DBA87',
    msTileColor: '#000000',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',

    // configure the workbox plugin
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      // swSrc is required in InjectManifest mode.
      swSrc: 'dev/sw.js',
      // ...other Workbox options...
    }
  }

    // 安装
    vue add pwa
    // 使用
    config.plugin('workbox')

• pluginOptions
  用来传递任何第三方插件选项。
  插件可以作为 options.pluginOptions.xxx 访问这些选项。

参考 vue.js 官网。