文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

vue-route+webpack部署单页路由项目，访问刷新出现404问题

问题描述： 前端同事使用Vue.js框架，利用vue-route结合webpack编写了一个单页路由项目，运维协助在服务器端配置nginx。...部署完成后，访问首页没问题，从首页里打开二级页面没问题，但是所有的二级页面打开后，再次刷新，就会出现404现象！如下： ? ?...问题原因： 刷新页面时访问的资源在服务端找不到，因为vue-router设置的路径不是真实存在的路径。...如上的404现象，是因为在nginx配置的根目录/Data/app/xqsj_wx/dist下面压根没有loading这个真实资源存在，这些访问资源都是在js里渲染的。...[总结：nginx配置文件里一定要定义access和error日志，出现问题要第一时间查看日志(error)]

1.8K90

为了避免出现404页面，你可以添加以下配置来处理后端返回的404错误

为了避免出现404页面，你可以添加以下配置来处理后端返回的404错误百度网站百度秒收录方法大全？...404页面，你可以添加以下配置来处理后端返回的404错误，例如重定向到首页或自定义错误页面。...以下是补充后的配置：location / {    proxy_pass http://$upstream_pool;        # 关键配置：拦截后端错误响应    proxy_intercept_errors... on;          # 方案1：将404重定向到首页    error_page 404 = @redirect_home;        # 方案2：使用自定义错误页（取消注释即可）    #...两种可选方案：重定向首页（推荐）：当出现404时自动跳转到网站首页（return 302 /;）。

1.1K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    单页面Vue网站无服务端实现静态化SEO

    那么如果我做两个页面呢？ 一个页面是首页 + 管理后台，首页需要实时更新，加一些meta就会被收录，且通常搜索引擎过来的流量很少是直接到首页；管理后台最适合单页面，不需要被搜索。以下称为非SEO页。...页的跳转方式： SEO页全部采用静态固定链接，在非SEO页跳转到SEO页之前，必须将该页面生成并发送到服务器 SEO页的生成： 搭建vue工程做出该页面 将js、css等静态文件先部署到服务器 使用模板软件或者自己写函数...时间记录： 20190405 还需要做的事 footer的站点名称与header保持一致；header动态获取和链接； SEO页的更新： 只要将更新后的页面保存到静态文件托管服务器即可 20190408...完成编码并上线 20190619 完成编码过程博文撰写Nginx配置 我们实现页面静态化之后，如果刷新会出现404，这时候需要修改Nginx的一些配置。...Nginx的Rewrite实现router history 刷新 无404 一个典型的Nginx的配置为 [root@test-huanqiu ~]# cat /Data/app/nginx/conf/

    4.2K10

    【Vue】路由介绍 && vue-router使用 && 重定向 && 路由模式

    基本介绍一、单页应用程序介绍1. 概念单页应用程序：SPA（Single Page Application）是指所有的功能都在一个 HTML 页面上实现。2....具体示例单页应用网站：网易云音乐 https://music.163.com/多页应用网站：京东 https://jd.com/3....单页应用 vs 多页应用单页应用类网站：系统类网站/内部网站/文档类网站/移动端站点多页应用类网站：公司官网/电商类网站二、路由介绍1....问题在网页打开时，url 默认是 / 路径，未匹配到组件时，会出现空白内容，如下所示：2. 解决方案重定向：匹配 / 后，强制跳转到其它页面，比如跳转到 /find 路径，避免页面空白。3....表示任意字符* 表示出现 0 次或多次所以 (.*) 就是 "匹配任意长度的字符串"优点：更灵活，可以在 404 页面显示 "你访问的路径是 xxx"。

    43510

    有遇到布署服务器后刷新404问题吗？

    我们先还原一下场景： vue项目在本地时运行正常，但部署到服务器中，刷新页面，出现了404错误 先定位一下，HTTP 404 错误意味着链接指向的资源不存在 问题在于为什么不存在？...为什么history模式下有问题 Vue是属于单页应用（single-page application） 而SPA是一种网络应用程序或网站的模型，所有用户交互是通过动态重写当前页面，前面我们也看到了，不管我们应用有多少页面...www.xxx.com 时，这时会打开我们 dist 目录下的 index.html 文件，然后我们在跳转路由进入到 www.xxx.com/login 关键在这里，当我们在 website.com/login 页执行刷新操作...错误 解决方案 看到这里我相信大部分同学都能想到怎么解决问题了， 产生问题的本质是因为我们的路由是通过JS来执行视图切换的， 当我们进入到子路由时刷新页面，web容器没有相对应的页面此时会出现404 所以我们只需要配置将任意页面都重定向到...错误页面，因为对于所有路径都会返回 index.html 文件 为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面 const router = new VueRouter

    9K31

    Vue下路由History mode导致页面无法渲染的原因

    用 Vue.js + vue-router 创建单页应用，是非常简单的。...一般开发的单页应用的URL都会带有#号的hash模式，因为整个应用本身而言就只有一个HTML，其他的都是通过router来渲染。...只需要修改router中的index.js，在每个path中加上你项目名称就行了，这样就能够成功了。...最后的页面效果： 404错误 在History mode下，如果直接通过地址栏访问路径，那么会出现404错误，这是因为这是单页应用（废话）…其实是因为调用了history.pushState API...) 关于每次点击链接都要刷新页面的问题 众所周知，开发单页应用就是因为那丝般顺滑的体验效果，如果每次点击都会刷新页面… 出现这个的原因是因为使用了window.location来跳转，只需要使用使用

    1.2K40

    hash和history路由模式

    routes[path] : routes['404']; } // navigate('/user'); // 导航至用户页面 关于刷新404的问题 为什么history模式下会出现?......只有 http://website.com 会被包含在请求中 ，因此对于服务端来说，即使没有配置location，也不会返回404错误 简单来说: 前端打包后的 dist 包中，只有 index.html...单页应用 当我们在浏览器地址栏输入一个地址时，浏览器就会去服务端去请求内容。但每次点击一个链接，就去服务端请求，这样会有页面加载的等待。...后来慢慢就出现了单页应用，在第一次访问时，就把 html 文件，以及其他静态资源都请求到了客户端。之后的操作，只是利用 js 实现组件的展示和隐藏。除非需要刷新数据，才会利用 ajax 去请求。...但是纯粹的单页应用不方便管理，尤其是开发复杂应用的时候，需要有“多页面”的概念，并且很多用户习惯浏览器的前进后退的导航功能。

    1.3K10

    部署Vue项目到服务器后404错误

    二、404错误原因及解决方案 错误场景 问题描述：Vue项目在本地运行正常，但部署到服务器后刷新页面出现404错误。 错误定位：HTTP 404错误表示请求的资源不存在。...原因分析 History模式问题：在Vue单页应用（SPA）中，所有用户交互通过动态重写当前页面实现。构建物只产出index.html，而nginx配置可能未涵盖所有路由。...Hash模式无问题：Hash模式不会将hash值包含在HTTP请求中，因此不会因hash变化重新加载页面，避免了404错误。...nginx -s reload 覆盖所有路由：在Vue应用中覆盖所有路由情况，并提供404页面。...'history', routes: [ { path: '*', component: NotFoundComponent } ] }) 其他后端配置方案（如Apache、Node.js

    1.2K10

    一次因浏览器缓存导致的生产环境事故：前端线上 bug 复盘

    一次因浏览器缓存导致的生产环境事故：前端线上 bug 复盘 文章概览 一次因浏览器与 CDN 缓存策略不当引发的前端生产事故 从现象、排查、根因到应急与长期治理的完整复盘 给出可直接落地的缓存配置与发布流程改进建议 事故背景 单页应用...事故现象 部分用户访问空白页或页面样式错乱 控制台报错资源 404 或运行时异常，如 Uncaught SyntaxError、某个 chunk 未定义 复现具有地域性：同一时间不同地区表现不同，且隐身模式明显好转...CDN 均被缓存 发布后 index.html 引用新的带指纹的静态资源，而部分用户仍持有旧 index.html，请求旧的 chunk 路径出现 404 CDN 层刷新不彻底或有延迟，边缘节点与源站内容不一致...提供临时兼容资源别名，避免 404（仅限紧急兜底） 指导用户强制刷新或关闭 Service Worker（在支持的场景下） 开启监控：资源 404 比例、白屏率、JS 错误率实时告警 验证方法 使用隐身模式与禁用缓存分别访问...：发布管道内置 CDN Purge 与 curl -I 验证步骤 监控与回滚：以资源 404 比例、白屏率、JS 错误率设定阈值与自动回滚开关 Service Worker 更新策略：版本提示与点击激活

    38510

    前端学习部署node服务-腾讯云服务器宝塔模版

    在宝塔面板的 “网站” 选项中，添加站点。输入你的域名（如果没有域名，可以使用服务器公网 IP 代替），设置网站根目录等信息。将前端项目文件上传到网站根目录。...例如，如果是一个单页应用（SPA），需要正确配置路由的转发规则，确保页面刷新不会出现 404 错误。...Strict-Transport-Security "max-age=31536000"; error_page 497 https://$host$request_uri;#SSL-END #ERROR-PAGE-START 错误页配置...(js|css)?...运行目录项目目录免费SSL免费申请证书对应域名添加DNS解析（腾讯云控制台我的域名--点击解析--我的解析）验证正确性等待签发，下载对应pem、key、crt文件宝塔页面填写对应key、pem本人也是纯前端入门

    2.1K10

    H5的离线缓存技术

    离线存储可以将站点的一些文件存储在本地，它是浏览器自己的一种机制，将需要的文件缓存下来在没有网络的时候可以访问到缓存的对应的站点页面，包括html，js，css，img等等文件在有网络的时候，浏览器也会优先使用已离线存储的文件...如果page-url 页面中包含了 Manifest 属性则浏览器会将该页面中列举出来的资源分别保存，所以Manifest最好使用在SPA（单页应用）项目中。...FALLBACK: /html5/ /404.html 下面的例子中，当任何页面无法访问时跳转到 "404.html"页。...FALLBACK: *.html /404.html 注意： 第1点必须在第一行，2、3、4直接的顺序是随意的，并且在同一个manifest文件中可以出现多次，多次和一次效果一样。...window.location.reload();   //重新加载页面---刷新页面         }     } else {         // Manifest didn't changed

    1.3K20

    替换网站的404为宝贝回家把404页面利用起来！

    相信大家对404都是不陌生的，在一个站点的帖子找不到的时候都会进入404页面。 其实404页面真的没有什么用,那么如何把你的站点的404页面利用起来呢？...腾讯在很之前开放了宝贝回家的404页面接口，意味着任何404的网页都可以改为宝贝回家。 这样的页面大家应该在qq空间日志失效的时候不少看到。...错误页面，当您看到这个页面，表示您的访问出错，这个错误是您打开的页面不存在，请确认您输入的地址是正确的!..."> 直接记事本复制进去后命名为404.html，上传至网站根目录替代掉原来的404.html即可。...替换网站的404为腾讯宝贝回家把404页面利用起来！ 版权所有：可定博客 © WNAG.COM.CN 本文标题：《为爱心助力！替换网站的404为宝贝回家把404页面利用起来！》

    2.7K20

    告别 hash 路由，迎接 history 路由

    因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 https://ainyi.com/about 就会返回 404，因为后端没有 /about 相应的拦截器，自然 404...的 ssm 框架，原本只做了后端接口，只提供接口 对于诸如 /about 的 url，SpringMVC 的 @RequestMapping() 没有做映射，自然是报 404 错误的 考虑到除了接口，...其他访问的 history 全都是返回 404 页面，想到一个方法，就是直接做 404 页面的跳转转发，这就解决了 history 路由的问题 就是在 web.xml 中进行 404 页面的配置跳转，在...https://ainyi.com/tag/vue 当点击刷新的时候，会报一个找不到资源的错误，也就是 js 静态资源没找到 qaq 这就要前端来解决这个问题 刷新找不到资源 由于之前是使用 hash...页面自动跳转到 index.html 之后，服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件 为了避免这种情况，应该在 vue-router 里面设置无法匹配正确路由的情况跳转到前端的

    1.9K20

    Vue Router 实现动态路由和常见问题解决方案

    具体思路 基础信息准备 前端代码实现基本静态路由，例如：登录页路由，服务器错误页路由等（这里有一个坑，后面讲）。数据库存储全部动态路由信息。 数据库如何存储动态路由信息？...动态路由刷新后 404 这应该是本方案中最常见的一个错误之一，其原意是很多人在创建「基本静态路由」的时候回把 404 页面的路由也加入在里面，从而导致页面加载初期动态路由还没有加入到路由实例中，匹配范围最广的...404 页面就会跳出来。...解决方法就是将 404 页面的路由也加入到动态路由中。 动态路由刷新后变空白页 造成这一问题的原因有很多，我这里遇到的问题是使用 参考文章3 解决的，但具体原理我还没弄清楚，等我做一下研究再来更新。...参考 大师兄：Vue 动态路由的实现…… Vue Router 文档页面 rambo：vue router 动态路由 刷新后变空白页

    4K20

    Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案

    Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案 by:授客 QQ：1033553122 开发环境 Win 10 Vue 2.9.6 node-v10.15.3-x64.msi 下载地址...= new Router({ mode: "history", // 去掉 http://localhost:8080/#的# routes: staticRoute }); /*vue是单页应用...，刷新时，重新创建实例，需要重新加载的动态路由，不然匹配不到路由，出现页面空白的情况*/ router.beforeEach((to, from, next) => { // let userId...= sessionStorage.getItem("userId") // 登录界面登录成功之后，会把用户信息保存在会话 // 关闭浏览器tab标签页，重新打开一个tab页，重新访问该站点，这时会开启一个新的会话...，由于还没加载动态路由，预期和动态路由匹配的url，会匹配到静态路由的 *，然后跳转404页面。

    3.6K20

    手把手教你用Hexo+Github 搭建属于自己的博客

    踩坑提醒 1）注意需要提前安装一个扩展： npm install hexo-deployer-git --save 如果没有执行者行命令，将会提醒 deloyer not found:git 2）如果出现下面这样的错误...当 克隆/下载 完成后，打开 站点配置文件， 找到 theme 字段，并将其值更改为 next。...---- 添加404 页面 GitHub Pages有提供制作404页面的指引：[Custom 404 Pages](https://help.github.com/articles/creating-a-custom...但是自定义404页面仅对绑定顶级域名的项目才起作用，GitHub默认分配的二级域名是不起作用的，使用hexo server在本机调试也是不起作用的。...推荐使用[腾讯公益404](http://www.qq.com/404/) 我的404页面配置如下 <meta http-equiv="content-type

    1.4K20

    从后端到前端之Vue（五）小试路由

    HTML5 History API提供了一种功能，能让开发人员在不刷新整个页面的情况下修改站点的URL。...最后加一个简单的导航，执行上面两行js代码。...按F5会刷新页面，如果这时候url地址栏是 “/about” ，那么就会向服务器提交这个网址，很显然会出现服务器的404页面。因为服务器网站里面并没有这个地址。那么怎么办呢？...目前想到的办法就是修改网站的404页面。比如IIS，可以到IIS里改一下，把我们做的这个router.html设置为404的响应页面，这样按F5就没事了。 　　...只需要注意一下vue.js的引用地址确保能够正确加载js文件即可。 　　那么如果地址栏里输入 http://127.0.0.1:8000/aboutss 呢？当然是vue设计的404模块了。

    1.2K20
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券