Vue 开启history 后，如果后台进行路由重定向，则页面报错。。

weixin_38058428 2018-03-05 08:56:47

如果后台不进行重定向，则刷新后页面404，重定向后则报如下错误。。 ![4}[3]85T7P@RZA0WZV]0M12|533x180](upload://m0mqDCLbYms25czlyzRbCPONfr7.png)，奇怪的是在不同的浏览器里报不同的错误，上面的是谷歌，下面这个是360的。

(X6K40ZG)YZRF(0ZP$_0T29.png956×200 36.6 KB ，报错的地方是一样的，就是后面那三个文件。当然本地调试时一点问题没得，我今天搞了一天，头都要炸了啊，我其实怀疑是后台重定向的问题，但一想这么简单的问题，又不敢怼他。。。求大神啊。。。

...全文

872 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

weixin_38087646 2018-03-09

打赏
举报

代码有错吧~少了标签符号啊

weixin_38062424 2018-03-09

打赏
举报

404是打包路径错了吧

weixin_38090696 2018-03-05

打赏
举报

这个是谷歌的，好像没传上来。。

ECQR3`$APM2CY4S)}20I}T7.png952×137 5.65 KB

Vue下路由History模式打包后页面空白的解决方法在 Vue 项目中，默认的路由模式是 Hash 模式，但是这种模式会带来一些问题，如 URL 中的 "#" 符号不美观，微信分享、授权登录等功能也会出现一些问题。 History 模式可以解决这些问题，但是新手往往会碰到 History 模式打包后页面空白的情况，这个问题是因为 Vue 官方没有正确地配置路由的 base 参数所导致的。解决方法是，在 vue-router 的配置中添加 base 参数，例如：`base: /history，mode: history`。这个 base 参数是项目的路径，如果项目在根目录下，则不需要添加 base 参数，但是如果项目在子目录下，则需要添加 base 参数。此外，还需要在服务器上配置路由，例如使用 Nginx 配置 location /history { ... }，这样可以将所有请求重定向到 index.html 文件中，并让 Vue 路由正确地解析 URL。在 History 模式下，浏览器会模拟出一条历史记录，但是服务器上没有真正的路径资源，所以会出现 404 错误。如果使用 Hash 模式，则不会出现这个问题，因为 Hash 模式的 URL 带有 "#" 符号，服务器不会解析这个 URL。在 Vue 项目中，使用 History 模式需要正确地配置路由的 base 参数和服务器的路由配置，否则会出现页面空白的问题。同时，也需要注意如果项目不是根目录下，需要添加 base 参数，以便 Vue 路由正确地解析 URL。使用 History 模式需要正确地配置路由的 base 参数和服务器的路由配置，以便解决页面空白的问题，并且让 Vue 路由正确地解析 URL。知识点：1. Vue 路由的两种模式：Hash 模式和 History 模式2. History 模式的优点：解

vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面一片空白的情况,而且没有资源加载错误的报错信息. 这个其实仔细研究下会发现,如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了.这个vue官方有解释,需要加一个base // base: '/history', // mode: 'history', 这个base即为项目路径. 以上两个都解决了,还是会发现,此时只有首页能访问,通

主要介绍了详解Vue路由History mode模式中页面无法渲染的原因及解决，非常具有实用价值，需要的朋友可以参考下

在本篇文章里小编给大家分享的是关于VUE的history模式下除了index外其他路由404报错解决办法，对此有需要的朋友们可以学习下。

资源下载链接为： https://pan.quark.cn/s/67c535f75d4c Vue.js 是一种流行的前端 JavaScript 框架，它以声明式和组件化的编程方式构建单页应用（SPA）。在开发过程中，vue-router 是常用的插件，用于处理前端路由。vue-router 提供了 hash 模式和 history 模式两种路由模式。hash 模式通过 URL 中的 hash（#号）部分来模拟完整 URL，页面不会重新加载；而 history 模式则让 URL 更简洁美观，但需要服务器支持，否则在刷新页面或直接访问路径时可能会出现 404 错误。 history 模式下，URL 的改变是通过 JavaScript 操作 window.history 实现的，并非真正的 HTTP 请求。当直接访问某个路径时，服务器会尝试查找对应的资源，如果找不到就会返回 404 错误。为了解决这个问题，可以采用以下几种方法：服务器重定向配置在服务器配置中，可以将所有请求重定向到入口文件（如 index.html）。以 Nginx 为例，可以在配置文件中添加如下内容：这样，无论用户访问什么路径，服务器都会尝试提供相应资源，若资源不存在，则回退到 /index.html，由 Vue 路由接管并渲染对应组件。 Nginx 具体配置根据文档，将所有请求转发到 index.html，以解决刷新导致的 404 问题。具体配置如下： try_files 指令会依次检查文件是否存在，若都不存在，则重定向到 /index.html，由前端路由处理。后端代理配置可以使用 Nginx 的 proxy_pass 指令将请求代理到后端服务。例如：这样，所有以 /api/ 开头的请求都会被代理到后端服务，确保这些请求能被正确处理。参考官方教程 Vue.js 官方文档也提到了关于 hist

其他技术讨论专区

476

社区成员

790,963

社区内容

发帖

与我相关

我的任务

其他技术论坛（原bbs）

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章