vue.config.js是什么？
1、vue.config.js 是一个可选的配置文件，可对vue-cli(webpack)自定义配置。
2、和 package.json 同级的，根目录下
3、会被 @vue/cli-service 自动加载
1、publicPath（Vue CLI 3.3 之前用baseUrl）
部署应用包时的基本 URL，默认值 / ，用来配置应用包dist目录下index.html引入资源路径，例如，如果你的应用被部署在 https://12345/hjm/，则设置 publicPath 为 /hjm/。
这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径。注意：history模式的路由及多页面应用时publicPath避免使用相对路径('./')。
2、outputDir
打包输出在dist中的目录，默认值'dist'，每次执行时会先清除dist中已有的相同资源(构建时传入 --no-clean 可关闭清除功能)。
输出目录如：outputDir : 'dist/DEV/70000080'
3、assetsDir
基于outputDir目录下放置的静态资源目录，会与index.html同级。与publicPath相似。
4、indexPath
自定义入口页，默认index.html
5、filenameHashing
默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，默认值 true。
设置false，生成的静态资源文件不会带有hash值，这样会造成浏览器二次浏览项目资源文件缓存问题。
6、pages
配置多页面入口
module.exports = {
pages: {
index: {
entry: 'src/main.js', // page 的入口
template: 'public/index.html', // 模板来源
filename: 'index.html', // 在 dist/index.html 的输出
},
demo: {
entry: 'src/pages/demo/main.js',
template: 'public/demo.html',
filename: 'demo.html',
},
demo2: {
entry: 'src/pages/demo2/main.js',
template: 'src/pages/demo2/demo2.html',
filename: 'demo2.html',
},
}
}
7、lintOnSave
设置是否在开发环境下每次保存代码时都启用 eslint，默认值：default
可选值：
false：关闭每次保存都进行检测
true：开启每次保存都进行检测，效果与warning一样
‘warning’：开启每次保存都进行检测，lint 错误将显示到控制台命令行，而且编译并不会失败。
‘error’：开启每次保存都进行检测，lint 错误将显示到浏览器页面上，且编译失败。
‘default’：同’error’
8、runtimeCompiler & runtimeonly
main.js中 new Vue
runtimeCompiler
![]()
image.png
Vue中的模板如何最终渲染成真实DOM
template -> ast -> render -> vdom -> UI
runtimeonly
![]()
image.png
Vue中的模板如何最终渲染成真实DOM
render -> vdom -> UI
runtimeonly比runtimeCompiler性能更高，代码量更少
那么.vue文件中的template是由谁处理的
是由vue-template-compiler
runtime-only 更快的原因：
runtime-only比runtime-compiler更快，因为它省略了vue内部过程中的第一个过程，如果是runtime-compiler那么main.js中就会出现template从而需要过程一导致增加了一个过程，同时增加了大小而 runtime-only 模式中不是没有写 template ，只是把 template 放在了.vue 的文件中了并有一个叫 vue-template-compiler的在开发依赖时将.vue文件中的 template 解析成 render 函数了因为是开发依赖，不在最后生产中，所以最后生产出来的运行的代码没有template
9、transpileDependencies
默认情况下 babel-loader 会忽略所有 node_modules 中的文件，默认值false。你可以启用本选项，以避免构建后的代码中出现未转译的第三方依赖。
不过，对所有的依赖都进行转译可能会降低构建速度。如果对构建性能有所顾虑，你可以只转译部分特定的依赖：给本选项传一个数组，列出需要转译的第三方包包名或正则表达式即可。
10、productionSourceMap
如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建，默认值true。
项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。也就是说map文件相当于是查看源码的一个东西。如果不需要定位问题，并且不想被看到源码，就把productionSourceMap 置为false，既可以减少包大小，也可以加密源码。
11、crossorigin
设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性 CORS跨域共享。
12、configureWebpack
如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。
如果这个值是一个函数，则会接收被解析的配置作为参数。该函数既可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。
更多细节可查阅：配合 webpack > 简单的配置方式 或者打印config展开了解更多属性。
12、chainWebpack
是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
13、devServer
vue cli暴露的一个对webpack-dev-server做配置的接口，支持所有webpack-dev-server的选项。它对应了webpack配置选项中的devSever。在开发中，通常配置devServer.proxy，实现请求代理，避免跨域。更具体的可以看webpack的devServer配置。
devServer: {
contentBase:path.join(__dirname, "dist"), // 指定服务器资源的根目录,一般是项目的根目录。
port:8000, // 启动的端口号
host:0.0.0.0, //配置 DevServer的服务器监听地址,host的默认值是 127.0.0.1, 配置后访问 http://0.0.0.0:8000/ 可以访问的到，其他局域网的电脑也可以访问。
headers：{'hjm':123}, //配置HTTP响应中注入一些HTTP响应头，不会注入到CDN及https资源响应头中。
historyApiFallback: true, //用来配置应对返回404页面时定向跳转到特定页面的，也可以是对象方式通过rewrites配置路由正则。
hot: true, // 不配置此项也能热更新，在 webpack 5 中 HMR 已自动支持。
inline:true, //配置webpack-dev-server 两种模式，可以实现自动刷新和模块热替换机制，inline: false 就是使用iframe模式来重载页面。
overlay: true, //用来在编译出错的时候，在浏览器页面上显示错误。该属性值默认为false。
open:true, // 启动服务后自动打开浏览器
compress:true, // 开启gzip压缩
quiet: true //静默模式,开启后，除了初始启动信息之外的任何内容都不会被打印到控制台
proxy:{} // 跨域代理
}
