vue中项目页面空白但不报错产生的原因及分析
vue项目页面空白但不报错产生的原因分析
vue项目中我们请求一个路由，打开页面发现页面是空白的，产生的主要原因有四种：
1.路由重复
如果配置了两个路由是重复的，比如配置了两个【path: ‘/’】，那么访问就会看到空白页面，这时候改下重复的路由配置即可
2.app.js中删除了router-view
我们可以把 app.js看成路由的顶级路由，再创建路由他属于二级路由，依次类推
3.路由导航守卫没有next（）
我们写路由导航守卫时，next相当于是安保人员，只有他有权力进行放行，如果他不进行放行，我们肯定无法接着访问，从而导致页面空白
4.访问的就是空白页面
这种情况比较少，我们再访问一个新的页面时，一般会写点文字进行页面展示
打包vue文件后页面空白，出现报错
报错如下：
Refused to apply style from 'http://127.0.0.1:5500/css/chunk-43aa77e1.33bcbef1.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.Failed to load resource: the server responded with a status of 404 (Not Found)
此块代码意思为：
拒绝应用’http://127.0.0.1：5500/css/chunk-43aa77e1.33bcbef1.css’，因为它的MIME类型（‘text/html’）不是受支持的样式表MIME类型，并且需要严格的MIME检查已启用。
失败加载资源：服务器的响应状态为404（未找到）
Failed to load resource: the server responded with a status of 404 (Not Found)
此块代码意思为：
未能加载资源：服务器响应状态为404（未找到）
引起此类报错的原因是因为js、css等文件过多，需手动添加（./）获取当前文件路径，但js等文件过多手动添加路径会引起冲突，
此类报错的解决方案为：在根目录中添加一个名为vue.config.js的文件，操作如下
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了Vue实现大屏页面的屏幕自适应，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了Vue开发环境跨域访问问题,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-01-01
这篇文章主要为大家详细介绍了vue.js devtools遇到问题的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
在Vue中嵌入第三方页面可以采用多种方法,例如使用<iframe>、Vue插件、动态加载第三方脚本或WebComponents,不同方法适用于不同类型的内容和项目需求,如<iframe>适用于整个网页,而动态脚本和WebComponents适合特定功能,选择合适的方法可以有效整合外部资源2024-09-09
获取路由详细内容信息是我们日常开发中经常会遇到的需求,下面这篇文章主要给大家介绍了关于vue获取路由详细内容信息的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了使用VUE实现一键复制内容功能,功能就是当我们点击复制按钮时，会提示“复制成功”，这样复制的内容就可以在其他地方使用了，感兴趣的朋友可以学习一下2023-04-04
在项目需求中我们会遇到国际化的中英文切换,这篇文章主要给大家介绍了关于前端VUE双语实现方案的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-08-08
vue2.6.10+vite2开启template模板动态编译的过程
这篇文章主要介绍了vue2.6.10+vite2开启template模板动态编译,本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-02-02
vue打包上传服务器加载提示错误Loading chunk {n} failed
这篇文章主要为大家介绍了vue打包上传服务器加载提示错误Loading chunk {n} failed解决方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
在Vue组件中,我们经常使用<style scoped>属性来实现样式封装,期望组件样式只对当前组件生效,不会污染全局样式,然而,在实际开发中,即使使用了scoped属性,同名样式类的混淆问题仍然时有发生,所以本文介绍了Vue Scoped样式混淆的问题分析与解决方案,需要的朋友可以参考下2025-10-10
最新评论