小白的 vue.config.js 配置分析
首先，vue.config.js 文件必须要导出一个对象【涉及到模块概念】
module.exports = {};
对象属性详解
# publicPath
部署生产环境和开发环境的URL。默认值是 /，表示绝对路径的根目录下
默认情况下，Vue CLI会假设你的应用是被部署在一个域名的根路径上。例如：https://www.my-app.com/。
如果应用时部署在一个子路径上，你就需要用这个选项指定子路径。例如：如果你的应用被部署在 https://www.my-app.com/my-app/，则设置值为 /my-app/。
在 Vue CLI 3.3 之后，baseUrl 已弃用，官方推荐用 publicPath，有趣的是我们可以通过设置相对路径提高包的适用范围，后续会提及
// process.env.NODE_ENV 是 vue cli 官方提供的变量，直接使用就可以，用来判断是生成环境还是开发环境，也就是判断是通过vue cli 本地运行，还是打包后部署到线上运行
// 以下是目前所开发项目中的常见配置
publicPath: process.env.NODE_ENV === 'production' ? './' : '/'
# outputDir
默认值为 dist，意味在执行打包命令后会在项目下生成一个名为 dist 的文件夹
在终端执行 npm run build 或 yarn build 后，生成的包文件的文件名称（这里必须和 publicPath 的生成环境路径一致，也就是打包部署到线上时，这里的值必须和publicPath的值保持一致）
举例： 假设你使用默认值，并将该打包生成的文件直接放在服务器https://www.my-app.com/ 的根目录下，那访问路径就是 https://www.my-app.com/dist， 为确保图片、文件等资源路径匹配不出错，publicPath【资源路径】的值就必须为 /dist/，且在打包之后包的名称不能修改，否则就会出现请求资源地址错误，很明显，则太死板了，因此我们在需要打包之前将 publicPath 设置为相对路径 ./, 这样寻找资源时便会自动匹配当前目录下路径，也就提高了包的适用范围
// 如果你将值修改为 mydist， 那打包后的文件夹名称变为 mydist
outputDir: 'dist'
# assetsDir
打包后用于放置生成的静态资源（js、css、img、fonts）的文件名称，默认值为 ''
这里需要注意的是当这里为默认值的时候打包后的文件格式一般如下
- dist
- css
- img
- js
... ...
当该属性设置值之后包结构会变为如下：
- dist
- 【assetsDir值】
- css
- img
- js
... ...
assetsDir: '',
# indexPath
默认值为 index.html
打包后的 .html 文件【入口文件】的 “[路径，]名称”，默认打包后生成的 .html 文件名为 index.html
// 将值修改为 my.html,打包后的入口文件名称也会变为 my.html
indexPath: 'my.html'
# filenameHashing
默认值为 true，修改为 false 关闭为文件添加 .hash值
默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。简单来说打包后的图片、js、icon等等资源文件由原先的 “名称.类型” 变为了 “名称.hash值.类型”。 例如：pic.png 变为 pic.82b9c7a4.png
这里需要注意的是，如果你在项目中并非是动态的添加图资源请求路径，大可不用担心会找不到图片，因为打包之后静态的资源地址也会被执行相应的处理。
以获取一张图片为例：
// 项目中代码如下
background: url('../assets/wq.jpg');
// 开发时控制台查看
background: url('../img/wq.7a8c6db5.jpg');
// 部署在服务器上时控制台查看
background: url('../img/wq.7a8c6db5.jpg');
可以看出来 webpack 已经做了相应的处理，也许你会奇怪，为什么会出现相对路径 ../
首先这里需要提到两个有趣的 vue cli 默认行为：
-
在项目assets文件夹下的所有图片资源无论嵌套多深【指文件夹嵌套】，在打包完成后，所有图片都会安置到
img文件夹下。举例：// 项目中 - assets - a - 1.jpg - b - 2.png - c - 3.jpeg // 打包后 - dist - img - 1.jpg - 2.png - 3.jpeg这里有必要提一句：若未检测到项目中有引用，assets 下图片是不会被打包的【这里可以自己测试一下，我只验证了一种情况，静态引用，但动态引用未测试】
-
public文件夹具有特殊性，在其下建立img文件夹，img文件夹【后续文件夹改叫目录吧，这样字可以少打一点】下的文件和目录结构会被完整保留。并且里面的内容不会被webpack解析，换句话说，即使你 设置filenameHashing: true，public目录下的文件也不会有任何变动。
另外经过测试，如果直接在public目录下建立一个名称不为img的目录，放置在项目中被引入的图片，该目录下所有图片都会安置到 包 的img目录下，且不会保留原有的目录结构，但图片不会被进行filenameHashing处理【也就是不会在名称后面添加.hash值】。
其他类型资源情况一样遵循上面的行为规律，只是 js 文件是在 public 下建立 js 文件夹，css 文件是在 public 下建立 css 文件夹
我设置的 assetsDir 默认值为 ''，因此 包结构 为：
- dist
- css
- img
- js
... ...
css 文件被解析到 css 目录下，要找到图片，因此使用 ../ 回退到 img 目录层级，然后到 img 目录下寻找对应图片，更多详情进入拓展：vue 图片引入相关问题
filenameHashing: true,
# pages
默认值 undefined
在多页模式【multi-page 模式】下构建应用。我们一般构建的都是单页应用，这个属性让其保持默认值就好。我自己对于多页模式并不了解，一下是搜寻的资料。
问题 ：这种多页模式 既不是传统的 MPA 多页模式，也是 SPA 单页模式，更像是一种一次性生成多个单页应用的方式，多个单页应用之间可以共享组件、方法和状态
解答：在不使用 vue-cli 高封装的 api 的时候我们想要配置打包出多个页面，需要使用 html-webpack-plugin插件输出一个 html 文件，多页面就配饰多个 new HtmlWebpackPlugin() 即可
多页面并不是为了减少首屏的渲染问题，更不是路由美化，要知道前端是从多页面 jsp 页面渲染 走到如今前后端分离，spa 的时代，当然多页面首屏一定程度上确实比单页面好些，但这个不是它的目的，多页面的使用场景：
- 对 seo 有要求的项目
- 传统后台插入主流框架开发
资料片传送门
pages: undefined
# lintOnSave
默认值 true，是否使用 eslint，true 表示启用，反之，禁用
如果你想要在生产构建时禁用 eslint，你可以用 process.env.NODE_ENV !== 'production';
注意，这个属性在 @vue/cli-plugin-eslint 被安装后生效
lintOnSave: process.env.NODE_ENV !== 'production';
# runtimeCompiler
默认值：false
是否使用包含 “运行时编译器” 的 Vue构建版本【这里的构建是名称，不是动词】，设置 true 后就可以在 Vue 组件中使用 template选项了，但是这会让你的应用【打包后的文件】额外增加 110kb 左右。
runtimeCompiler: false
# transpileDependencies
默认值为 false
生产源映射：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。如果设置该属性值为true,打包后就会生成相应的 .map 文件，用来准确映射是开发时的那一行那一列出错
如果设置为 false 可以加大打包时的速度，如果发现打包后的项目体积过大，将该值设为 false 就可以不输出 .map 文件，减少体积。
productionSourceMap: false
# crossorigin
默认为 undefined
设置生成的 HTML 中的 和