发现问题 vue项目完成打包出dist后准备打开index.html，发现居然页面是一片空白，f12一片报红。
分析问题 经过多次网上查询后发现这是由于vue打包时，脚手架会帮你配置好大量参数，但其中路径publicPath被配置为了"/",需要手动修改。
解决办法 1、将vue.config.js中的publicPath:"/“修改为publicPath:”./"
文章图片
2、删除之前的dist重新打包。
结语 【vue|vue打包后dist的使用】再次打包后打开dist中的index.html，发现页面出来了，但是如果页面有路由跳转的话，会发现跳转失败，
这时需要修改router中的路由模式为hash:
在router的index.js中修改：从vue-router中引入createWebHashHistory，将createWebHistory(process.env.BASE_URL)改为createWebHashHistory(process.env.BASE_URL)。
文章图片
最后重新打包即可。
推荐阅读
- js|jsonp跨域
- electron|electron修改vue项目打包后的exe图标
- vue|vuex的使用
- vue|vue中代理解决跨域
- JavaScript中通过style修改属性时需要添加“px”
- vue.js|vue开发搜索框防抖的优化和日常报错,
- vue项目|vue移动端 利用防抖的原理 ---实现搜索页面防抖操作
- vue.js|vue中搜索实现防抖
- vue.js|vue3 el-input 搜索实现防抖