vue.config.js 这个文件应该导出一个包含了选项的对象：或者，你也可以使用 @vue/cli-service

这个文件应该导出一个包含了选项的对象：

// vue.config.js

/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
module.exports = {
  // 选项...
}

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

// vue.config.js
const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  // 选项
})

属性设置解析

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

相对路径（'./'）的 publicPath 有一些使用上的限制。在以下情况下，应当避免使用相对 publicPath:

当使用基于 HTML5 history.pushState 的路由时；
当使用 pages 选项构建多页面应用时。

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

注意目标目录的内容在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)

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

从生成的资源覆写 filename 或 chunkFilename 时，assetsDir 会被忽略

indexPath——指定生成的 `index.html` 的输出路径 (相对于 `outputDir`)

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

pages

在 multi-page 模式下构建应用。

其值应该是一个对象，对象的 key 是入口的名字，value 是：指定了 entry, template, filename, title 和 chunks 的对象 (除了 entry 之外都是可选的)

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

默认值为default,lint 错误在开发时直接显示在浏览器中,会强制 eslint-loader 将 lint 错误输出为编译错误，同时也意味着 lint 错误将会导致编译失败;

值为true 或 'warning' 时，警告仅仅会被输出到命令行，且不会使得编译失败。

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

runtimeCompiler——是否使用包含运行时编译器的 Vue 构建版本，默认为false

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

transpileDependencies——是否转译第三方依赖(`node_modules` 中的文件)，默认为false

对所有的依赖都进行转译可能会降低构建速度。

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

productionSourceMap——生产环境是否需要生产source map，默认为true

可以设置为false以加速生产环境构建

crossorigin——设置生成的HTML中`<link rel="stylesheet">`和`<script>`、`<audio>`、`<img>`、`<video>`标签的`crossorigin`属性，是否需跨域认证设置

注意： 该选项仅影响由html-webpack-plugin在构建时注入的标签-直接写在模板（pulbic/index）中的标签不受影响

intergrity——生成的HTML中`<link rel="stylesheet">`和`<script>`、`<audio>`、`<img>`、`<video>`标签启用SRI,默认为false

configureWebpack

值为Object，则会通过 webpack-merge合并到最终的配置中

    configureWebpack: {
        resolve: {
            alias: {
                graphql: resolve('src/graphql'),
                env: resolve(`src/env/${APP_ENV}`),
                assets: resolve('src/assets'),
            }
        },
        plugins: [new MyAwesomeWebpackPlugin()]
    },

值为Function，则会接受被解析的配置作为参数。

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

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
    } else {
      // 为开发环境修改配置...
    }
  }
}

chainWebpack——是一个函数，会接收一个基于 webpack-chain的 `ChainableConfig`实例。

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

允许对内部的webpack配置进行更细力度的修改。

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .tap(options => {
          // 修改它的选项...
          return options
        }
        
        //添加一个新的 Loader
        config.module
        .rule('graphql')
        .test(/.graphql$/)
        .use('graphql-tag/loader')
        .loader('graphql-tag/loader')
        .end()
      // 你还可以再添加一个 loader
        .use('other-loader')
        .loader('other-loader')
        .end()
        
     // 修改插件选项
      config
      .plugin('html')
      .tap(args => {
      //比方说你想要将 `index.html` 默认的路径从  */Users/username/proj/public/index.html* 改为  */Users/username/proj/app/templates/index.html*
        args[0].template = '/Users/username/proj/app/templates/index.html'
        return args[/* 传递给 html-webpack-plugin's 构造函数的新参数 */]
      })
  }
}

css

css.requireModuleExtension

默认值为true,只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块。

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

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

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

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

css.sourceMap——是否为 CSS 开启 source map，默认值为false

设置为 true 之后可能会影响构建的性能

css.loaderOptions——向 CSS 相关的 loader 传递选项

devServer

所有 webpack-dev-server 的选项都支持。注意：

有些值像 host、port 和 https 可能会被命令行参数覆写。
有些值像 publicPath 和 historyApiFallback 不应该被修改，因为它们需要和开发服务器的 publicPath 同步以保障正常的工作。

devServer.proxy——代理控制行为

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}

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

pluginOptions——用来传递任何第三方插件选项

module.exports = {
  pluginOptions: {
    foo: {
      // 插件可以作为 `options.pluginOptions.foo` 访问这些选项。
    }
  }
}

vue.config.js