‘壹’ Vue多页面应用配置
最近由于工作驱动，项目包含pc端及mobile端，pc端和mobile端核心功能一致，最大的不同是UI,为了减少维护的成本，决定使用Vue的多页面开发。
项目线上部署在一个子目录下，为了解决在本地和线上路径保持一致，需要修改一些配置。所以以此篇文章来记录一下配置过程中的问题。
这里是我放在github上的项目，里面有整个配置文件。感兴趣的朋友可以参考一下： vue-multiple-page
此篇文章记录了先在根路径下的多页面配置，再从根路径修改成子路径的配置
vue脚手架vue-cli3及以上；
在本地用vue-cli新建一个项目；
vue3.js :路由配置修改的是 history: createWebHistory('/mobile/')
vue3.js :路由配置修改的是 history: createWebHistory('/e/')
mobile端mobile.js的base修改成 base: '/e/mobile'
vue3.js :路由配置修改的是 history: createWebHistory('/e/mobile')
特别注意的地方
‘贰’ vue打包后生成可配置文件，用于修改接口路径等
vue打包发布后，如果接口地址等发生变更，需要重新打包，过于繁琐。因此需要将一些例如接口地址、网站参数等拿出来动态配置。
具体步骤如下：
1、安装generate-asset-webpack-plugin插件
npm install generate-asset-webpack-plugin --save-dev
2、在vue.config.js中配置如下：
3、使用
在main.js中全局引入
4、打包后dist下生成.json文件，修改接口后生效
如果你有更好的方法也请留言哦。。。
‘叁’ vue编译打包速度优化
1、首先在config文件夹下配置webpack.dll.config.js(内容如下)，要打包的模块的数组可以将一些较大的依赖放进vendor中
2、在package.json的scripts加上
3、运行npm run dll就可以生成vendor-manifest.json和vendor.dll.js
4、然后在index.html中引入vendor.dll.js
然后就可以正常的进行编译打包，会发现将更多的依赖放到vendor，打包速度越快
优化前
优化后
大概平均可以节省三分之一的时间。参考 webpack中文网
‘肆’ vue配置不同环境打包项目（dev、test、prod）
2.修改package.json文件，自定义打包命令
3.修改config文件，添加对应环境的xxx.env.js文件
test.env.js文件
prod.env.js
dev.env.js
4.修改打包配置
打开build/webpack.prod.conf.js文件
修改
build/build.js
写入api文件
api/index.js文件
执行npm run build--test 、npm run build--prod 打包不同环境
‘伍’ vue项目history打包后部署在二级目录相关配置
history模式，因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接通过路由访问 就会返回 404。所以呢，要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面。
1.vue-router 路由的文件的配置，根据自己部署的二级目录填写
2.在vue.config.js配置文件（如果没有新建一个，项目根目录下）
3.在入口文件中index.html 的head 标签内加入
4.最后就是服务端部署配置，以nginx 为例
配置完这些之后，可以通过二级目录访问到页面了，但是图片资料会加载不了。
1.通过img标签写的图片路径，如果是写的绝对路径例如/static/images, 图片就会访问不到，要改为static/images相对路径，（曾经犯过这样的错误记录一下）；
2.通过css background写的图片路径，如果是写的绝对路径例如/static/images, 图片就会访问不到，因为css在打包时会通过loader处理并且通过插件ExtractTextPlugin从JS中抽取出来，所以需要改配置；
这样配置后打包发现还不行，还需要把css的绝对路径写法改为相对路径，比如background: url('/static/images/login/loginBg.png') no-repeat;改为background: url('../../../static/images/login/loginBg.png') no-repeat;
‘陆’ 通俗易懂讲解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）
参考： https://my.oschina.net/u/4446873/blog/4882847
默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.xxx.com/ 。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.xxx.com/my-app/ ，则设置 publicPath 为 /my-app/。
这个值在开发环境下同样生效。如果你想把 开发服务器架设在根路径 ，你可以使用一个条件式的值：
通常开发环境，本地运行都会直接部署在根路径上，publicPath设置为'/'，访问地址是你的IP地址。如下是设置成'/app'的效果：
从上面可以得知，静态资源文件都是在app下的，所以在dist下新增添一个app目录，把dist下文件放到app下，相当于一个文件的路径，可以发现项目会正常启动。一般nginx都会配置一个静态资源目录，打包后的文件都会放到这个静态资源目录里面，nginx去做映射，所以publicPath这个属性基本不用改。'/'就行。
结论： publicPath配置成'/aaa/bbb/ccc'， 则需在相应的服务器路径中新建aaa>bbb>ccc的文件夹，然后将打包后的文件放进去，就ok啦。
项目中，我会在.env.proction文件中设置一个变量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
proctionSourceMap
crossorigin （不理解）
integrity
configureWebpack
chainWebpack
Css相关配置
devServer
如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
补充知识
所谓的跨域就是不同源，不满足协议、域名、端口都相同的约定
http://www.test.com/dir/login.html 同源
https://www.test.com/index.html 不同源 协议不同(https)
http://www.test.com:90/index.html 不同源 端口不同(90)
http://www.demo.com/index.html 不同源 域名不同(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 部分
此文记录下来，方便自己遗忘的时候能够快速查阅，如有错误请指出。
参考链接：
https://www.jianshu.com/p/b358a91bdf2d
https://www.jb51.net/article/174200.htm
https://blog.csdn.net/liu_yunzhao/article/details/90520028
这篇文章讲的也很详细 https://blog.csdn.net/guozhangqiang/article/details/87197870