常用 vue-config.js 配置


这里我只写基本作用与概念,详细使用方式可以看官网

https://cli.vuejs.org/zh/config/

vue.config.js 基本配置

publicPath

默认值:/

部署应用包时的基本 URL

用法和 webpack 本身的 output.publicPath 一致

但是 Vue CLI 在一些其他地方也需要用到这个值

所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath

module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/'
}

outputDir

默认值:dist

当运行 vue-cli-service build 时生成的生产环境构建文件的目录

请始终使用 outputDir 而不要修改 webpack 的 output.path

assetsDir

默认值: ''

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

indexPath

默认值:'index.html'

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

filenameHashing

默认值:true

默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存

pages

默认值:undefined

在 multi-page 模式下构建应用

每个“page”应该有一个对应的 JavaScript 入口文件。

其值应该是一个对象,对象的 key 是入口的名字,value 是:

  • 一个指定了 entry, template, filename, title 和 chunks 的对象 (除了 entry 之外都是可选的);
  • 或一个指定其 entry 的字符串。
module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时,
      // template 中的 title 标签需要是 <%= htmlWebpackPlugin.options.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

默认值:default

是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码

这个值会在 @vue/cli-plugin-eslint 被安装之后生效

取值情况:

  • true/warning
    • eslint-loader 会将 lint 错误 输出为编译警告,不会使得编译失败
  • default
    • eslint-loader 将 lint 错误 输出为编译错误,同时也意味着 lint 错误 将会导致编译失败
  • error
    • eslint-loader 把 lint 警告 也输出为编译错误,这意味着 lint 警告 将会导致编译失败。

runtimeCompiler

默认值:false

是否使用包含运行时编译器的 Vue 构建版本

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

transpileDependencies

默认值:[]

默认情况下 babel-loader 会忽略所有 node_modules 中的文件

如果你想要通过 Babel 显式转译一个依赖,可以在这个选项中列出来

productionSourceMap

默认值:true

如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建

crossorigin

默认值:undefined

设置生成的 HTML 中  和