vue打包后出现空白页的原因及解决方式详解
更新时间：2022年07月24日 16:44:56 作者：温情key
在项目中很多时候需要用到vue打包成html不需要放在服务器上就能浏览,根据官网打包出来的html直接打开是显示空白,下面这篇文章主要给大家介绍了关于vue打包后出现空白页的原因及解决方式的相关资料,需要的朋友可以参考下
路由模式 history
新建项目什么都不动，路由模式：history, 直接npm run build打包
打包之后，直接打开dist文件里面的ndex.html可以看到页面是空白的，控制台是这样的。
再看看网页源码, 对比dist文件夹结构可以看到资源路径的引入是错误的，应该用'./'而不是'/'
那怎么修改打包之后的路径呢？查看vue-cli官网配置参考中的publicPath
我们只需要在和package.json同级的地方新增一个vue.config.js文件，将路径修改为相对路径'./'
// vue.config.js
module.exports = {
publicPath: './',
}
再次打包, 页面不是空白了，但还有很多东西没显示完，正常的页面是这个样子
打包之后是这样子
点击About进行路由跳转是这样子
路由模式 hash
改一下路由模式，找到router/index.js文件, 将history修改为hash, 再进行打包
// router/index.js
const router = new VueRouter({
mode: 'hash',
base: process.env.BASE_URL,
routes
})
页面显示和路由跳转就都可以了
总结
1. 修改路径
// vue.config.js
module.exports = {
publicPath: './',
}
2. 更改路由模式
// router/index.js
const router = new VueRouter({
mode: 'hash',
base: process.env.BASE_URL,
routes
})
路由模式拓展
路由的hash和history模式的区别
- 首先hash模式url带#号，history不带#号
- hash模式前端路由修改的是hash值(#及以后)，对后端没影响，因此改变hash也不会重新加载页面，比如修改为了不存在的#123页面，页面不会跳转;
history模型刚好相反，没有对应的页面就会出现404
打包路由选择
- 前端测试用 hash 模式
- 项目上线不想要url带#号的话使用history模式，不过使用history模式需要与后端沟通，需后端配置
到此这篇关于vue打包后出现空白页的原因及解决方式的文章就介绍到这了,更多相关vue打包后空白页解决内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue实现图片下载点击按钮弹出本地窗口选择自定义保存路径功能
vue前端实现前端下载,并实现点击按钮弹出本地窗口,选择自定义保存路径,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-12-12
ElementUI下拉组件el-select一次从后端获取选项并设置默认值方式
这篇文章主要介绍了ElementUI下拉组件el-select一次从后端获取选项并设置默认值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了vue中表格设置某列样式、不显示表头问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了基于Vue+Webpack拆分路由文件实现管理,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-11-11
这篇文章主要介绍了vue axios基于常见业务场景的二次封装的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
最近vue.js 非常火热，小编也趁机学习了下vuejs的一些基础知识，于是尝试做一个像微信平台里的菜单编辑器功能，下面脚本之家小编把vue.js 微信公众号菜单编辑器功能的实现代码分享给大家，需要的朋友参考下2018-05-05
这篇文章主要介绍了如何封装一个类似微信通讯录带有字母检索功能的vue组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
如何在我们切换tab标签的时候，缓存标签最后操作的内容，简单来说就是每个标签页中设置的比如搜索条件及结果、分页、新增、编辑等数据在切换回来的时候还能保持原样，这篇文章介绍vue3 keep-alive实现tab页面缓存功能，感兴趣的朋友一起看看吧2023-04-04
vue require.context全局注册组件的具体实现
本文主要介绍了vue require.context全局注册组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-05-05
今天小编就为大家分享一篇vue自定义正在加载动画的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
最新评论