本文目录一览：
- 1、在config.js里面如何对默认首页进行配置
- 2、vue.config.js中的webpack配置，优化及多页面应用开发
- 3、【webpack】--config 的使用
- 4、求解答关于Vue.config.js文件的详细配置
- 5、通俗易懂讲解vue.config.js的配置参数
在config.js里面如何对默认首页进行配置
XP系统可在桌面上点“开始”/“运行”，然后在对话框里输入“SYSEDIT”就可以了。但是同时打开C:\WINDOWS\SYSTEM.INI;C:\WINDOWS\WIN.INI;C:\CONFIG.SYS和C:\AUTOEXEC.BAT共四个文件,注意你要设置的CONFIG.SYS文件为空,不知你要设置什么内容?你的操作系统是哪个版本?
vue.config.js中的webpack配置，优化及多页面应用开发
目录
官方文档
vue-cli3以下版本中，关于webpack的一些配置都在config目录文件中，可是vue-cli3以上版本中，没有了config目录，那该怎么配置webpack呢？
3.x初始化项目后没有了build和config文件，如果你想对webpack相关内容进行配置，需要自己在根目录下(与package.json同级)创建一个vue.config.js文件，这个文件一旦存在，那么它会被 @vue/cli-service 自动加载。(但需要我们自己手动创建哦vue.config.js，跟package.json同级)
在配置中绝大多数都是（可选项）
常规操作还是用到了commjs语法
部署应用包的基本Url，默认/, 可以设置为相对路径./,这样打出来的包，可以部署到任意路径上
输出文件目录（打包后生成的目录，默认dist）
打包后生成的静态资源目录，默认“ ” ，也就是我们打包后的css，js等存放的位置
是否在保存的时候检查
生产环境的 source map，可以将其设置为 false 以加速生产环境构建，默认值是true
可通过 devServer.proxy解决前后端跨域问题（反向代理）
扩展： hot 和 hotOnly 的区别是在某些模块不支持热更新的情况下，前者会自动刷新页面，后者不会刷新页面，而是在控制台输出热更新失败
扩展：
Preload： 用于标记页面加载后即将用到的资源，浏览器将在主体渲染前加载preload标记文件。Vue CLI 应用会为所有初始化渲染需要的文件自动生成 preload 提示；
Prefetch: 用于标记浏览器在页面加载完成后，利用空闲时间预加载的内容。Vue CLI 应用默认为所有作为 async chunk 生成的 JavaScript 文件 (通过动态 import() 按需 code splitting 的产物) 自动生成prefetch提示。
webpack配置
扩展:
在这里configureWebpack和chainWebpack的作用相同，唯一的区别就是他们修改webpack配置的方式不同：
这里配置了全局sass 需要安装的依赖 sass-loader less-loader
由于 sass-loader 版本不同，loaderOptions 中的 additionalData 的键名也不同
vue-cli3中的webpack与vue多页面应用开发
相关参数:
封装
很好的pwa插件相关配置
pwa介绍及使用
当运行项目并且打包的时候，会发现chunk-vendors.js这个文件非常大，那是因为webpack将所有的依赖全都压缩到了这个文件里面，这时我们可以将其拆分，将所有的依赖都打包成单独的js;
上面已经提到过去掉打印的操作（console、debug）这里详细讲解一下
新版uglifyjs-webpack-plugin需写成以下方式
gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。webpack在打包时可以借助 compression webpack plugin 实现gzip压缩。
和我们正常创建项目相同，这里通过vue-cli3脚手架进行创建
【webpack】--config 的使用
命令行中执行 webpack ，默认会使用 webpack.config.js 配置文件。
1.将现有的 webpack.config.js 文件名修改为 webpack.dev.config.js ；
2.运行 webpack ，如下图所示：
求解答关于Vue.config.js文件的详细配置
这里是创建代理服务器，访问的时候会通过代理服务器转发，所以就不会出现跨域问题。
这里的配置是以"/api"开头的地址，都通过代理访问，其他的地址则不通过代理，后面的是代理地址。
通俗易懂讲解vue.config.js的配置参数
贴上 官网
vue-cli3 创建的时候并不会自动创建vue.config.js，因为这个是个可选项，所以一般都是需要修改webpack的时候才会自己创建一个vue.config.js
再然后因为vue-cli3内部高度集成了webpack，一般来说使用者不需要再去知道weboack做了什么，所以没有暴露webpack的配置文件，我们可以手动去创建vue.config.js 去修改默认的webpack。注意，只能叫vue.config.js。
publicPath （从 Vue CLI 3.3 起已弃用baseUrl，请使用publicPath）
参考：
默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 ，则设置 publicPath 为 /my-app/。
这个值在开发环境下同样生效。如果你想把 开发服务器架设在根路径 ，你可以使用一个条件式的值：
通常开发环境，本地运行都会直接部署在根路径上，publicPath设置为'/'，访问地址是你的IP地址。如下是设置成'/app'的效果：
从上面可以得知，静态资源文件都是在app下的，所以在dist下新增添一个app目录，把dist下文件放到app下，相当于一个文件的路径，可以发现项目会正常启动。一般nginx都会配置一个静态资源目录，打包后的文件都会放到这个静态资源目录里面，nginx去做映射，所以publicPath这个属性基本不用改。'/'就行。
结论： publicPath配置成'/aaa/bbb/ccc'， 则需在相应的服务器路径中新建aaabbbccc的文件夹，然后将打包后的文件放进去，就ok啦。
项目中，我会在.env.production文件中设置一个变量VUE_APP_BASE_URL ，项目打包后告诉相关人员 nginx 路由前缀是什么即可
outputDir
assetsDir
indexPath
filenameHashing
直观效果：当运行npm run build时，
打包后的文件后面都会带一个8位的hash值，那啥是个hash值？
在打包出来的文件名上加上文件内容的hash是目前最常见的有效使用浏览器长缓存的方法，js文件如果有内容更新，hash就会更新，浏览器请求路径变化所以更新缓存，如果js内容不变，hash不变，直接用缓存。（这段话是从别的文章里面参考的）。
将filenameHashing这个值设置为false试试，就不会带那个后缀hash值。
pages
lintOnSave
runtimeCompiler
transpileDependencies
productionSourceMap
crossorigin （不理解）
integrity
configureWebpack
chainWebpack
Css相关配置
devServer
如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
补充知识
所谓的跨域就是不同源，不满足协议、域名、端口都相同的约定
同源
不同源 协议不同(https)
不同源 端口不同(90)
不同源 域名不同(demo)
当协议、域名、端口中任意一个不相同时，就是不同源。若不同源之间相互请求资源，就算作跨域
补充知识
反向代理（Reverse Proxy）方式是指以代理服务器来接受网络上的连接请求，然后将请求转发给内部网络上的服务器，并将服务器上得到的结果返回给请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。客户端无需做任何配置。
修改config/index.js /vue.config.js文件（改完之后千万记得要重新 npm run dev）
host 将他的值修改为 0.0.0.0，代表可以访问本机所有的IP地址，让vue项目可通过localhost和IP同时访问。
port 设置端口号
open 是否在第一次编译时是自动打开浏览器
hot 开启为true，启动热重载，自动刷新页面
https
inline
overlay
targe 代理的服务器，也就是api要访问的服务器。
changeOrigin 允许跨域， 为false时，请求头中host仍然是浏览器发送过来的host;如果设置成true：发送请求头中host会设置成target的值
ws 是否代理websocket
pathRewrite 重写 url 的 path 部分
此文记录下来，方便自己遗忘的时候能够快速查阅，如有错误请指出。
参考链接：
这篇文章讲的也很详细
