[vue-cli 3] vue.config.js的配置参考

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

我的是vue-cli 3.11版本

两种写法

module.exports = {
  // 选项...
}

也可以使用 @vue/cli-service 提供的 defineConfig 帮手函数，以获得更好的类型提示：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  // 选项
})

配置

publicPath

 publicPath:'/my-app/',  //部署应用包时的基本 URL。

outputDir

  outputDir:'dabao-v2',  //打包出来的名字，默认dist
  outputDir:'../dabao-v2',  //打包到上一级

assetsDir

  assetsDir:'./app',  //放置生成的静态资源 (js、css、img、fonts) 的目录。

indexPath

 indexPath:'first.html',      //修改打包文件名字，默认index.html

filenameHashing

filenameHashing:true,         //无法使用 Vue CLI 生成的 index HTML，将这个选项设为 false 来关闭文件名哈希,控制缓存，默认为true

pages

  pages: {                                //多页面模式构建应用，每个“page”应该有一个对应的 JavaScript 入口文件，默认undefined
    index: {                              //入口的名字
      entry: 'src/main.ts',               // page 的入口,只有这个必选
      template: 'public/index.html',      // 模板来源
      filename: 'first.html',             // 在 static/first.html 的输出(前面修改过了)
      title: 'xxx',   // 当使用 title 选项时，template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      chunks: ['chunk-vendors', 'chunk-common', 'index'] // 在这个页面中包含的块，默认情况下会包含 提取出来的通用 chunk 和 vendor chunk。
    },
    // 当使用只有入口的字符串格式时，模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话，就回退到 `public/index.html`，输出文件名会被推导为 `subpage.html`。
    //subpage: 'src/subpage/main.js'
  },

lintOnSave

lintOnSave值会在 @vue/cli-plugin-eslint 被安装之后生效,通过 eslint-loader 每次保存时 lint 代码

设置为 true 或 warning 时，eslint-loader 会将lint错误输出为编译警告。默认情况下，警告仅仅会被输出到命令行，且不会使得编译失败。

如果你希望让lint 错误在开发时直接显示在浏览器中，你可以使用 lintOnSave: 'default'。这会强制eslint-loader 会将lint错误输出为编译错误，同时也意味着lint 错误将会导致编译失败。

设置为 error 将会使得 eslint-loader 把 lint 警告也输出为编译错误，这意味着 lint 警告将会导致编译失败。

lintOnSave:true,

或者，你也可以通过设置让浏览器 overlay 同时显示警告和错误：

devServer: {
    overlay: {
      warnings: true,
      errors: true
    }
  }

runtimeCompiler

  runtimeCompiler:false,  //是否使用包含运行时编译器的Vue构建版本，设置为true后就可以在Vue组件中使用template选项，但是这会让应用额外增加10kb左右,默认false

transpileDependencies

默认情况下 babel-loader 会忽略所有 node_modules 中的文件。你可以启用本选项，以避免构建后的代码中出现未转译的第三方依赖。

不过，对所有的依赖都进行转译可能会降低构建速度。如果对构建性能有所顾虑，可以只转译部分特定的依赖：给本选项传一个数组，列出需要转译的第三方包包名或正则表达式即可。

transpileDependencies: false,  //boolean | Array<string | RegExp> 

productionSourceMap

productionSourceMap: true,  //不需要生产环境的SourceMap，设为false 可以加快生产环境构建，默认true

测了几次，除去网络影响，应该是快了一点

crossorigin

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

该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。

crossorigin:undefined,  //默认undefined

integrity

在生成的 HTML 中的<link rel="stylesheet">和 <script> 标签上启用 Subresource Integrity (SRI)。如果你构建后的文件是部署在 CDN 上的，启用该选项可以提供额外的安全性。

该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。

当启用 SRI 时，preload resource hints 会被禁用，因为 Chrome 的一个 bug 会导致文件被下载两次。

integrity:false         //默认false 

configureWebpack

值是一个对象，则会通过 webpack-merge 合并到最终的配置中。

如果这个值是一个函数，则会接收被解析的配置作为参数。该函数既可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。

基于环境有条件地配置行为，或者想要直接修改配置，那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内，你可以直接修改配置，或者返回一个将会被合并的对象：

const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 
module.exports = {
  configureWebpack: {
    plugins: [
      new MiniCssExtractPlugin()
    ]
  }
}

chainWebpack

是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。

Vue CLI 内部的 webpack配置是通过 webpack-chain 维护的。这个库提供了一个 webpack原始配置的上层抽象，使其可以定义具名的 loader 规则和具名插件，并有机会在后期进入这些规则并对它们的选项进行修改。

对于 CSS 相关 loader 来说，推荐使用 css.loaderOptions 而不是直接链式指定 loader。这是因为每种 CSS 文件类型都有多个规则，而 css.loaderOptions 可以确保你通过一个地方影响所有的规则。

  chainWebpack: (config) => {
    config.resolve.alias.set("@", path.resolve("src")); // 配置别名
    // config.entry('main').add('babel-polyfill') //配置ie
  },

css.modules

v4起被启用，与下面相反

css.requireModuleExtension

默认情况下，只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块。

设置为 false 后你就可以去掉文件名中的 .module 并将所有的 *(css|scss|sass|less|styl(us)?) 文件视为 CSS Modules 模块。

如果你在 css.loaderOptions.css 里配置了自定义的 CSS Module 选项，则 css.requireModuleExtension 必须被显式地指定为 true 或者 false，否则我们无法确定你是否希望将这些自定义配置应用到所有 CSS 文件中。

我的v3版本不被允许

  css: {
    requireModuleExtension: false  //默认true
  }

css.extract

生产环境下是 true，开发环境下是 false

是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。

• true

  css: {
    extract:true,  
  }

可以看到css被抽离出一个个的文件，js文件也并没有样式出现

• false

  css: {
    extract:false,  //默认true
  }

可以看到没有css文件，js文件有样式出现

同样当构建 Web Components 组件时它总是会被禁用 (样式是 inline 的并注入到了 shadowRoot 中)。

当作为一个库构建时，你也可以将其设置为 false 免得用户自己导入 CSS。

提取 CSS 在开发环境模式下是默认不开启的，因为它和 CSS 热重载不兼容。然而，你仍然可以将这个值显性地设置为 true 在所有情况下都强制提取。

css.sourceMap

是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能。默认false

  css: {
    sourceMap:false,  //默认true
  }

css.loaderOptions

向 CSS 相关的 loader 传递选项 Type: Object

支持的 loader 有：css-loader,postcss-loader,sass-loader,less-loader,stylus-loader

devServer.proxy

你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。

devServer: {
    proxy: 'http://localhost:4000' //指向开发环境 API 服务器
  }

parallel

是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。

parallel:require('os').cpus().length > 1

pwa

向 PWA 插件传递选项。

pluginOptions

这是一个不进行任何 schema 验证的对象，因此它可以用来传递任何第三方插件选项。

  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [path.resolve(__dirname, "./src/style/index.less")], //指定全局变量的less文件
    },
  },