vue3.0 vue-router4.0打包后页面空白的解决方法
更新时间：2023年02月01日 10:50:30 作者：here962464
本文主要介绍了vue3.0 vue-router4.0打包后页面空白的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
开发环境可以正常渲染页面，路由跳转都没有问题，但是打包之后本地打开index.html出现报错或者页面空白的情况：
脚手架版本：
vue-router版本：
第一种报错-资源加载失败
这种错误是因为vue.config.js的配置里面 publicPath写了绝对路径，生产环境改为./相对路径即可，vue.config.js详细配置参考官方文档
第二种错误：无报错，js加载了，但是页面空白（router-view没有渲染任何内容）
这种情况是因为vue-router的history模式，history模式下访问页面地址栏的地址没有#
这种情况可以把history模式改为hash模式，丑是丑了点，但是我做的是手机端的页面，用户也看不见地址栏，所以无所谓吧（丑总比加载不出来好）
在配置路由的router.js里面，把createWebHistory改成createWebHashHistory
然后就可以了。
到此这篇关于vue3.0 vue-router4.0打包后页面空白的解决方法的文章就介绍到这了,更多相关vue3.0 vue-router4.0打包空白内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue-cli3 从搭建到优化的详细步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏,本文主要介绍了Vue首屏优化方案小结,感兴趣的可以了解一下2024-05-05
Vue中使用v-model双向数据绑定select、checked等多种表单元素的方法
v-model 指令可以用在表单 input、textarea 及 select 元素上创建双向数据绑定,它会根据控件类型自动选取正确的方法来更新元素,本文给大家介绍Vue中如何使用v-model双向数据绑定select、checked等多种表单元素,感兴趣的朋友一起看看吧2023-10-10
这篇文章主要介绍了Vue源码解读之Component组件注册的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
本文介绍了Vue的全局安装过程、查看版本、安装扩展等步骤,并提供了解决在.vue文件目录下运行报错的方法,涉及到的错误解决包括使用命令安装@vue/compiler-sfc和执行npm install命令安装依赖2024-10-10
这篇文章主要介绍了vue3中的createApp分析,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章主要介绍了VUEX 使用 mutations的两种方式,实现方式就是利用vuex中的mutations，在mutations中定义一个方法，这个方法就是把点击的index（也就是每个列表的唯一标识），传给state中的当前标识，需要的朋友可以参考下2023-01-01
详解Vue3.0 + TypeScript + Vite初体验
这篇文章主要介绍了详解Vue3.0 + TypeScript + Vite初体验，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
这篇文章主要介绍了Vue路由 重定向和别名的区别说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
computed作为计算属性其作用是描述响应式数据的复杂逻辑计算，当所依赖的响应式数据发生改变时计算属性会重新计算，更新逻辑计算的结果，这篇文章主要介绍了Vue.js中的computed的功能设计,需要的朋友可以参考下2023-06-06
最新评论