解决vue项目不报错但是运行为空白页的问题

已于 2024-08-19 12:07:56 修改
阅读量120 收藏
点赞数 2
文章标签： vue.js typescript vscode
于 2024-08-19 11:31:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73067198/article/details/141321155
版权

省流——先重点检查所有路由文件和导入的大小写，然后保证所编辑界面为App.vue

查了很多攻略方面都说主要可能是路由文件的问题，但是仔仔细细检查了好多遍仍然没有发现错误

然后又逐个检查所有文件的时候，发现我的内容都写在Layout文件夹中的index.vue中，然后把内容剪切到了App.vue中就好了！

小伍小伍永不止步
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue项目打包部署后页面空白，无报错(1)，2024前端面试心得
m0_74931167的博客
04-04 943
为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。前端面试题汇总CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】JavaScript。
vue项目页面空白的几个原因及解决办法
热门推荐
xin123____的博客
03-11 4万+
会出现vue项目页面空白，通常问题是在于路由上，可能是以下几种原因： 1.路由重复。 如果配置了两个路由是重复的，比如配置了两个【path: ‘/’】，那么访问就会看到空白页面，这时候改下重复的路由配置即可。 2.路由没有配置。 如果没有配置路由，那么访问的页面也可能是空白页，比如访问/yanggb，但是路由里却没有配置，这时候配置上丢失的路由配置即可。 3.路由配置指向页面为空白页。 这种情况就比较玄乎了，配置了指向的页面什么都没有，展示自然也是空白页。 总结 当然可能还会有别的原因导致vue项目出现空白
vue项目页面空白但不报错产生的原因分析
Clover ‘s Blog
03-16 9372
vue项目页面空白但不报错产生的原因分析
Vue登录页面跳转空白但不报错
Joeyyy126的博客
10-29 1540
登录页面跳转空白但也不报错
vue 项目上线后，页面空白但不报错的问题（缓存问题）
CS饭 的博客
07-01 5935
vue 项目从 pre 环境上到正式环境后，在一些同事电脑中出现问题。在一个同事电脑的 chrome 浏览器中，从租户切换到管理员账户后，点击侧边栏，逐个进入新开发的页面（新增加的路由、新增加的页面），页面空白没有任何内容，但是控制台中没有任何报错，必须刷新一下才有内容。且该问题只在他的 chrome 浏览器中出现，其他浏览器没有问题。在另一个同事电脑中，不用切换账户、不用退出登录，关掉当前页面后，重新从该项目入口进入后，点击侧边栏中的新开发页面，也出现页面空白问题，刷新浏览器后页面正常。在其他一些人的电脑
Vue项目打包部署后页面空白，无报错，为什么大公司一定要使用微服务
2401_83977357的博客
04-04 511
归根结底是因为打开页面后没有匹配到任何一个路由，也就是设置在router里的路径没有任何一个被匹配到，包括其中设置的path:"/"这个路径，因此也就无法加载对应的组件，所以显示一片空白；官网原文：vue-router默认使用的是hash模式，如果要改成history模式，需要在router中将模式改成history，也就是})
【新手错误】VUE文件不报错但是创建的vue页面显示空白
weixin_57035990的博客
03-07 1104
代码对应版本
解决vue-cli项目打包出现空白页和路径错误的问题
10-18
总结来说，解决Vue CLI项目打包出现空白页和路径错误的问题，主要涉及`assetsPublicPath`的配置以及Vue Router的`history`模式使用。正确理解和调整这些配置，可以帮助开发者顺利部署和运行打包后的Vue应用。同时，...
Vue 2.0在IE11中打开项目页面空白的问题解决
08-29
Vue 2.0在IE11中打开项目页面空白的问题解决 Vue 2.0是一个流行的前端框架，然而在IE11中打开项目页面时，可能会出现空白的问题。这个问题的出现是因为Babel默认只转换新的JavaScript句法（syntax），而不转换新的...
快速解决Vue项目在IE浏览器中显示空白的问题
12-08
vue项目在IE浏览器中显示空白，是因为js文件没有加载，需要引入babel-polyfill这个东西，而用vue脚手架搭建的项目是没有引入此工具的 引入方法： 打开packge.json，在dependencies中加入：”babel-polyfill” : “^6.23.0” 然后重新npm install 在App.vue文件中import：import  “babel-polyfill” 这样IE浏览器就显示正常了。 以上这篇快速解决Vue项目在IE浏览器中显示空白的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
01-19
Vue项目运行npm run build后会生成一个dist文件夹，我们一般都是把这个文件夹部署到服务器上。dist文件夹里边有一个static文件和一个index.html页面，这个index就是最后单页面的最终文件。 问题一：我在打包完成后，...
vue qiankun 主应用访问子应用 不显示也不报错
风间琉璃c
01-12 1万+
业务背景：原内管平台中子系统越来越多，项目越来越大，打包发布需要十几分钟，本地运行npm run dev都非常容易因为内存不够导致崩溃（虚拟桌面内存就8G），业务打算将渠道管理平台中的一个子系统独立出来，用qiankun改成微前端架构。 介绍 - qiankunhttps://qiankun.umijs.org/zh/guide 遇到的问题：从主应用访问子应用时，控制台不报错，但是页面显示空白。 之前在测试demo中成功搭建过一次，由于过了两周印象不是很深刻，打算再重新搭建一次demo，主应用和子应用
process.env.VUE_APP_BASE_API 获取不到
qq_29384639的博客
06-30 2万+
data中定义 base_api:"" 获取 mounted(){ this.base_api = process.env.VUE_APP_BASE_API },
Vue学习笔记——语法看似没错，但是页面显示空白
pigzhu01的博客
11-16 1918
main.js中如下：页面报错如下：运行正常：但是但是，页面是空白！！！！就很恼火，对于初学者来说太不友好了！
Vue项目启动白屏问题
CJB2020818的博客
03-20 1万+
首先，如果项目能够启动，且控制台没有报错，那么首先去排除路由问题。先看一下主要的文件配置：main.js控制台没有报错，但是项目页面空白。
VUE打包运行空白页面 而且不报错的解决方案
一个抠得儿
08-17 3576
如果不是配置路径的问题，可以尝试修改路由文件 router.js的mode:"hash" 因为如果mode:"history"也会导致空白页
vue使用自定义指令实现一键复制
最新发布
Zing_ing的博客
09-09 325
/ 将需要复制的内容保存到元素上if (!console.log('无复制内容');return;// 创建一个 textarea 元素，用于选择和复制// 执行复制命令try {console.log('复制成功:', el.$value);console.log('复制失败');// 删除创建的 textarea 元素// 监听点击事件},// 当指令所在的元素被更新时触发},// 指令解绑时移除事件监听});
vue项目打包后页面空白
06-06
可能有多种原因导致打包后页面空白，以下是一些常见的解决方法： 1. 检查浏览器控制台是否有报错信息，如果有的话，根据报错信息进行排查。 2. 确认打包后的文件路径是否正确，特别是 index.html、JS 和 CSS 文件的引用路径是否正确。 3. 检查是否有未添加到依赖中的第三方库或插件，可能会导致打包后页面空白。 4. 确认是否正确设置了路由和组件，打包后的路由路径和组件名是否匹配。 5. 使用 Vue Devtools 插件进行调试，查看组件的状态和数据是否正常。 6. 尝试使用命令行工具运行打包后的文件，查看是否有报错信息，如果有的话，根据报错信息进行排查。 希望这些方法能对你解决问题有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值