vue history模式页面空白,vue-router4.0 history模式页面空白 解决方案合集

最新推荐文章于 2024-05-11 19:22:30 发布
最新推荐文章于 2024-05-11 19:22:30 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： vue Vue3.0 文章标签： vue-router history
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/meis27461/article/details/119637152
版权
vue 同时被 2 个专栏收录
10 篇文章 0 订阅
订阅专栏
Vue3.0
8 篇文章 0 订阅
订阅专栏

1.首先先确认资源是否全部加载完毕

这个问题不大，Chrome浏览器下——>F12打开控制台——>点击Nextwork查看css资源，js资源是否全部加载完毕

2.确认是否在http环境

webHistory模式只能在http环境下运行，不能直接打开，测试的话可以去下载一个phpstudy一键搭建环境。

3.确认打包后的项目是否放对了地方

  • 一般情况下vue打包后的文件是应该放在域名所指向的根目录，也就是说，通过域名或ip访问这个环境是直接指向打包后的index.html文件的

  • 不是根目录怎么配置↓↓↓↓↓↓
    在这里插入图片描述

4.还有诸多情况未复现，如上述情况都不符合，评论区见

Yehger
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE 解决mode为history页面为空白的问题
12-13
当router.js 中mode:history 发现刷新页面 不显示了，原因出来history的请求路径资源不存在了，这个需要后端配置的， 前端 需要修改一个地方即可, devServer: { port: 8000, host: '0.0.0.0', overlay: { errors: true }, hot: true, historyApiFallback: { index: '/index.html' } }, 新增historyApiFallback
vue系列：当vue路由配置history模式页面加载不出来的bug
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
08-22 4249
概述 在vue中，当你路由配置 history 模式的时候，在你本地跑 localhost:8080 的时候没有问题，但是当你把 index.html 给后端，让他链接上你的 dist 文件的静态资源的时候，可能会出现页面加载不出来也不报错的情况。 解决方案 比如这时地址是 https://e.mytest.cn/example，你的路由是在 example 之后拼接的。 方法一：你需要让后端在 ...
2024年Web前端最新nginx 配置 解决 vue history模式下空白 ，以及SSL证书安装，美团java面试题库
最新发布
2401_84447417的博客
05-11 394
拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。技术是没有终点的，也是学不完的，最重要的是活着、不秃。
vue路由history模式刷新页面一片空白，也不报错（解决方案）
Z.Dragon 的博客
11-07 9566
如果项目不在根目录下，路由需添加配置(base) router/index.js mode: 'history', base: '/h5/', config/index.js build assetsPublicPath: '/h5/', 后台配置代码：引用链接 END. ...
Vue路由模式（history模式 刷新页面空白解决方案）
失眠时间的博客
05-11 5280
Vue 路由模式 Vue 三种路由模式详解 Vue history模式，部署后访问页面刷新空白情况，需配置路由指向
vue项目路由为 history 模式时， 线上环境刷新后空白页或404
qq_60990876的博客
09-22 4208
则是因为资源的基础路径出现了问题。需要修改vite.config.ts文件，将base改为 / 而不是 ./。如果有 .env.production 文件，是将该文件的VITE_BASE_URL更改 ，若改.env.development 文件或 .env 文件 则无效。nginx配置如下:重点在于 加上 try_files $uri $uri/ /index.html;本地没问题，部署到测试环境或线上后 刷新后空白页。前面莫名其妙加上了当前地址的第一级路由的地址。所以拿不到正确的资源。
Vue下路由History模式打包后页面空白的解决方法
08-27
使用 History 模式需要正确地配置路由的 base 参数和服务器的路由配置，以便解决页面空白的问题，并且让 Vue 路由正确地解析 URL。 知识点： 1. Vue 路由的两种模式：Hash 模式和 History 模式 2. History 模式的...
一文了解vue-router之hash模式和history模式
10-16
主要介绍了一文了解vue-router之hash模式和history模式,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue-cli history模式实现tomcat部署报404的解决方式
10-16
其中，`history`模式是Vue Router的一种路由模式，它可以让应用的路由表现得更像传统的Web应用，使得URL无需包含哈希(`#`)符号，从而提供更好的用户体验。然而，当使用`history`模式并将应用部署到Apache、Nginx或...
Vue - history模式上线后页面空白以及404
sinat_33184880的博客
03-23 1819
以下代码基于vue-cli构建的项目 1.修改路由文件 mode: 'history' base填写打包文件(index.html和static文件夹)放置的目录路径 例如我的项目放置在(https://www.abc.com/draw/h5/)下，则base:/draw/h5/ export default new Router({ mode: 'history', bas...
处理 vue history模式打包后页面为空白页的问题
qq_21460133的博客
09-07 1117
vue history 模式打包后页面空白页问题记录
vue-router4 (四) 历史记录处理方法
2301_76510083的博客
02-27 514
负：router.go(-1);后退1个历史、router.go(-2);正：router.go(1);前进1个历史、router.go(2);3.router.go()和router.back()② router.back();没有参数，只能一步步后退。参数为数字，可正可负。
Vue-router的实现原理、hash和history两种模式的区别、history模式部署后刷新报404
muzidigbig的博客
12-12 7610
项目本地运行时候，首页子页面刷新均无问题。部署到服务器之后，刷新页面报错、出现404。 当vue项目的vue-router的mode为history路由模式时，若未进行相应的配置，可能会发生这种情况。 前端路由，即由前端来维护一个路由规则。实现有两种，一种时利用url的hash，也就是常说的锚点(#)，JS通过hashChange事件来监听url的改变，IE7及以下需要轮询；另一种是HTML5的History模式，它使url看起来像普通网站那样，以“/”分割，没有#，但页面并没有跳转，不过使用这种模式需
06. vue history模式刷新后页面白屏、401、404的问题
qq_29517595的博客
06-21 6407
vue项目history模式刷新后页面空白的问题
vue3+vite+vue-router4 使用history 页面打开白屏问题
qq_43237014的博客
01-05 1283
vue3+vite+router4.0使用history页面打开白屏问题
本地vue-router模式设置为mode:‘history‘时，页面空白，无法加载
newBunny的博客
11-30 1965
router 配置模式的地方，加一行代码 base: process.env.BASE_URL const createRouter = () => { return new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes: [] }) } 酱婶er，即可
Vue3后台管理切换菜单栏，页面空白问题【已解决】
qq_53114797的博客
06-27 2762
今天开发Vue3后台管理页面的时候创建了几个菜单栏并且写页面，写完之后测试发现这几个页面只能页面刷新后第一次点击后才会有显示页面效果，后面怎么点击怎么切换都不行都是空白的页面。后面排查了很久，发现就算Vue3支持可以Vue页面不用单个节点包裹着，但是我们尽量还是使用单个节点进行包裹，以免出现其他奇怪的问题（页面不加载）。数据加载问题：如果页面需要从后端获取数据展示，确认数据是否成功加载，并且在页面中正确使用。路由配置问题：请确保路由配置正确，每个菜单项都对应了正确的组件或页面，并且路由路径设置正确。
nginx 配置 解决 vue history模式下空白 ，以及SSL证书安装
2401_84006953的博客
04-04 1029
server {#你的域名root html;#你的网站根目录#网站默认访问文件NULL:!aNULL:!MD5:!ADH:!RC4;uribaiyiuri//baiyilocation ~ .php(.*)$ { #HP必须的配置，否则浏览器访问会直接下载php源码文件.+)$;
vue-router history模式的实现原理
05-05
Vue-Router 的 history 模式是通过 HTML5 History API 实现的，该 API 提供了 pushState()、replaceState() 和 popState() 方法，允许我们在浏览器历史记录中添加或修改历史记录条目。 在 history 模式下，Vue-Router 会监听浏览器地址栏的变化，当用户点击链接或使用浏览器的前进/后退按钮时，Vue-Router 会根据新的 URL 加载相应的组件。 具体实现原理如下： 1. 在 Vue-Router 实例化时，会根据 mode 属性的值来确定使用哪种模式，如果 mode 为 history，则创建一个 history 对象。 2. history 对象通过监听浏览器的 popstate 事件来实现路由的响应，当用户点击浏览器的前进/后退按钮时，会触发该事件，Vue-Router 会根据新的 URL 加载相应的组件。 3. 在路由跳转时，Vue-Router 会调用 history.pushState() 或 history.replaceState() 方法，将新的 URL 添加或修改到浏览器历史记录中，同时更新组件的显示。 4. 在页面刷新时，浏览器会向服务器发送请求，服务器会返回与当前 URL 相关的 HTML 页面，Vue-Router 会通过解析 HTML 页面中的 script 标签，获取路由配置信息，再根据当前 URL 加载相应的组件。 总的来说，Vue-Router 的 history 模式通过 HTML5 History API 来实现路由的响应，实现了前端路由的无刷新跳转和浏览器历史记录的管理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值