解决Vue history模式下路由跳转时页面404问题

Vue history模式404问题解决方案

最新推荐文章于 2025-10-25 18:00:00 发布

原创

最新推荐文章于 2025-10-25 18:00:00 发布 · 3.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #后端

在Vue的history模式下，直接访问特定路由可能导致404错误。为避免此问题，需要后端进行配置，确保所有未匹配的URL都返回index.html。Apache和nginx等服务器的配置示例在文中给出。

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！

不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。

所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

后端配置例子

注意：下列示例假设你在根目录服务这个应用。如果想部署到一个子目录，你需要使用 Vue CLI 的publicPath 选项和相关的 router base property。你还需要把下列示例中的根目录调整成为子目录 (例如用 RewriteBase /name-of-your-subfolder/替换掉 RewriteBase /)。

Apache

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

「已注销」

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

详细解析Vue在history路由模式部署后刷新404问题

weixin_44646763的博客

03-08

900

详细解析`vue`项目使用了`history`路由模式，且在本地时运行正常，但打包通过nginx部署后，刷新页面，出现了404错误

Vue history路由模式 刷新404

m0_46498310的博客

09-03

1093

Vue history路由模式 刷新404 当我们使用Vue开发SPA（单页面应用）的时候，需要引入前端路由系统（vue-router）。vue-router是vue.js官方提供的路由插件，它和vue.js是深度集成的。前端路由的核心，就在于 ——** 改变视图的同时不会向后端发出请求。** 在Vue单页面应用中页面切换其实就是组件的切换，vue-router的作用在于将路径和组件联系起来，使得通过不同的路径可以访问到不同的组件。在传统的页面中，我们切换页面是通过a标签来实现，每一次页面切换都需要向后台发

参与评论您还未登录，请先登录后发表或查看评论

vue路由拦截及页面跳转的设置方法

08-27

主要介绍了vue路由拦截及页面跳转的设置方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下

深入剖析 Vue Router History 路由刷新页面 404 问题：原因与解决之道

最新发布

你若盛开，清风自来

10-25

917

Vue Router的History模式刷新404问题解决方案摘要：Vue Router的History模式虽能提供美观的URL，但刷新页面时会出现404错误。这是由于服务器未配置处理前端路由的请求。解决方法包括：1）服务器端配置：Node.js/Express需返回index.html；Nginx使用try_files指令；Apache通过.htaccess重写规则；2）前端设置兜底路由提升用户体验。合理配置服务器可彻底解决刷新404问题，确保History模式下的SPA正常运行。（99字）

关于vue history 模式下刷新页面路径404 或跳转到主页问题的解决思路

MoonLight20100的专栏

04-21

2518

闲言少叙，直奔主题了，使用过vue 的都有这么问题，开发时候一直爽，一上生产就懵逼，测试环境和生产是不一样的，注定了，在生产环境下vue 的路径是无法保存的解决思路1 千篇一律的nginx找不到路径回首页，搜到了吧，一定搜得到，但是实在无法接受我的解题思路如下： vue 不是找不到路径么那么我把路径改为参数不就可以了？ nginx需要一定基础了这里必须用反向代理正向的会直接...

node express 启动 vue项目路由为 history 模式路由跳转问题

yun_hou的博客

07-12

1847

在express + vue 项目开发过程中，vue-router 设置 mode 为 history 时，页面刷新或者输入路径时，会直接访问node服务，而不会对应进入vue页面，在vue官网中已经给出了解决方法。但是有的时候自己配置总会出现问题，有一种简单的解决办法，就是利用connect-history-api-fallback 插件 vue export default new ...

[vue-router] history模式下路同无法跳转

qq893182474的博客

03-07

5833

本地dev运行和build-nginx运行，vant的样式异常和组件van-popup 包 van-cascader 的弹框显示不出内容！出现此问题的上一步是因为项目中配置的cdn无法访问，导致界面加载混乱，所以将cdn的引入屏蔽。但是本地开发时，屏蔽了就导致vue-router报错，点击按钮跳转子路由时无反应，报错如下：第一次突破，发现如果把屏蔽的cdn打开，就能正常点击了。问题，但是这是做的移动端网站，手机上加载图书入库时，要选库位（van-popup 包 van-cascader

vue history模式路由跳转空白

qq_39650208的博客

10-14

1945

今天遇到一个问题，就是在写大屏路由跳转时，遇到的问题，两个vue文件跳转，在一个vue文件里面写了这样的代码： this.$router.push({ name: 'infoRecord', query: { planId: item.id, sectionId: this.id, sitename: localStorage.siteName

VUE的history模式下除了index外其他路由404报错解决办法

12-10

我们先来看下代码： location / { ... root /dist; ... } try_files首先会判断他是文件，还是一个目录，...vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我

详解Vue路由History mode模式中页面无法渲染的原因及解决

08-29

在本文中，我们将深入探讨 History 模式的细节，以及在使用过程中遇到的页面无法渲染和 404 错误的问题及其解决方案。 1. Vue 路由 History 模式：在 Hash 模式下，URL 中会包含一个 "#" 符号，例如 `...

hash模式和history模式实现路由跳转

nknmn

08-20

3050

hash模式和history模式实现路由跳转

Vue路由history模式解决404问题的几种方法

12-10

问题背景： vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我们不想hash这种以#号结尾的路径时候的话，我们可以使用路由的history的模式。比如如下网址：使用hash模式的话，那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问，如果路由使用 history的话，那么访问的路径变成如下：http://localhost:8080/bank/page/count 这样的了；不过history的这种模式需要后台配置支持。比如：当我们进行项目的主页的时候

解决Vue项目路由跳转404问题

weixin_43259821的博客

02-18

5377

参考原文链接问题描述单页Vue应用部署到Tomcat服务器根目录后，除了重定向首页以外皆出现“404”状况。解决方法在Tomcat的vue项目文件夹（即webapps/ROOT）中新建一个文件夹WEB-INF，里面新建web.xml，添加以下内容： <?xml version="1.0" encoding="ISO-8859-1"?> <web-app xmlns="ht...

vue在history的路由模式下，刷新后界面报404

温壁

07-06

848

需要配置下nginx，位置在/conf/vhosts/*.conf，将当前目录下的所有conf都修改一下最好 server { listen 80; server_name agwenbi.vip; root "C:/phpstudy_pro/WWW/agwenbi.vip/iview"; location / { try_files $uri $uri/ @router;

vue路由history模式404问题

青春正在燃烧的博客

12-21

293

1.vue路由使用history部署到服务器后发现回车或者刷新网页404 解决方法： nginx配置文件加入 try_files $uri $uri/ /index.html last; 如：

若依从字典类型跳到字典数据跳到了404

m0_73847536的博客

10-11

1074

..meta: { title: '字典数据', activeMenu: '/system/dict' }...主要还是对若依路由的添加过程不太熟悉，排查的时候都没想到这个。

若依新建公共路由跳转到404问题

zbailing的博客

07-04

2816

如下写法错误，抄代码时，不要加上redirect，否则会跳转到404。

Vue路由history模式刷新404的解决方法

balloonhunter的博客

06-17

1305

前言在history模式下，开发环境中各页面的访问都正常。但是在生产环境只能访问首页（刷新404），其他页面的访问和刷新全都是404。而在hash模式下开发环境和生产环境路由跳转均无问题。后端配置： 1.Nginx location / { try_files $uri $uri/ /index.html; #检测文件存在性,重定向到首页目录,防止404。 } 2.Koa 使用中间件 //解决vue-router的history模式下，页面刷新后not found的问题 const histo

Vert.x开启对vue路由的支持(解决刷新导致路由丢失/404/空白页面)

qq_42929110的博客

03-27

335

第二步改造StaticHandler，来一个正则匹配地址，目的是防止Get请求被StaticHanlder识别。给API/WebSocket等地址来个前缀。如/api/xxxxService/getXXXXX。总所周知的原因，vue打包后的项目直接丢到Vert.x的webroot下导致路由丢失/404。访问前端页面结果蹦出来个Resource Not Found，嘎嘎糟心。第三步，添加404处理，让刷新，直接访问页面时不会导致路由丢失。

Vue下路由History模式打包后页面空白的解决方法

07-21

<think>首先，用户的问题是关于Vue路由History模式部署后页面空白的问题。用户提供了几个引用，我需要参考这些引用来构建答案。关键点： - 用户说："我想解决Vue路由History模式打包后页面空白的问题"，并问"请问Vue路由History模式部署后页面空白解决方案"。 - 引用包括关于Vue路由模式、部署问题、Nginx配置等的讨论。从引用中提取相关信息： - [^1]: 提到在Nginx配置中，如果URL匹配不到静态资源，就跳转到index.html。 - [^2]: Vue3中使用`createWebHistory`，但部署后页面空白，可能需要修改配置。 - [^3]: 描述Vue路由的三种模式，包括History模式。 - [^4]: 建议将History模式改为Hash模式，并修改publicPath为'./'。 - [^5]: 针对非根目录部署，在Nginx配置中使用try_files。用户的问题是关于History模式的，所以我应该专注于History模式的解决方案，而不是建议切换到Hash模式，除非必要。核心问题：在History模式下，部署后刷新页面出现空白，是因为服务器没有正确配置来处理前端路由。解决方案： 1. **服务器配置**：确保服务器将所有请求重定向到index.html。对于Nginx，使用try_files指令。 - 来自[^1]：`try_files $uri $uri/ /index.html;` - 来自[^5]：对于非根目录，如部署在/aaa下，`try_files $uri $uri/ /aaa/index.html;` 2. **Vue配置**： - 在Vue路由中，使用`createWebHistory`（Vue3）或mode: 'history'（Vue2）。 - 在vue.config.js中，设置publicPath为'./'或根据部署路径调整。来自[^4]：`publicPath: process.env.NODE_ENV === 'production' ? './' : '/'` 3. **部署路径**：如果应用不是部署在根目录下，需要调整路由和publicPath。步骤结构： - 回答应该清晰、结构化。 - 使用中文。 - 遵循系统级指令：行内数学表达式用$...$，独立公式用$$...$$（但这里可能不涉及数学公式，所以可以忽略）。 - 生成相关问题。 - 在引用段落末尾添加引用标识。回答结构： 1. **解释问题**：简要说明为什么History模式下刷新页面会出现空白。 2. **解决方案**： - 服务器配置（以Nginx为例）。 - Vue项目配置（路由和publicPath）。 - 其他注意事项。 3. **生成相关问题**：在末尾添加相关问题。引用标识： - 在引用具体内容时添加[^1], [^2]等。最终回答： - 帮助用户逐步解决问题。 - 确保真实可靠，基于提供的引用和常见知识。</think>### Vue路由History模式部署后页面空白的解决方案在Vue.js项目中，使用路由的History模式（如Vue3的`createWebHistory`或Vue2的`mode: 'history'`）可以消除URL中的`#`符号，提升用户体验。但部署后刷新页面出现空白，是因为服务器未正确配置：当用户直接访问或刷新非根路径（如`/about`）时，服务器会尝试加载对应文件（如`about.html`），但Vue是单页应用，所有路由应由前端处理，服务器只需返回`index.html`。以下是基于您的引用和常见实践的解决方案，以Nginx服务器为例（其他服务器类似）。 #### 步骤1: 配置服务器（以Nginx为例）服务器需要将所有请求重定向到`index.html`，由Vue处理路由。这可以通过Nginx的`try_files`指令实现。 - **如果应用部署在根目录**（如`http://example.com`）： ```nginx server { listen 80; server_name example.com; root /path/to/your/dist; # 替换为您的打包文件路径 index index.html; location / { try_files $uri $uri/ /index.html; # 所有请求都指向index.html } } ``` 引用[^1]中提到：如果URL匹配不到静态资源，就跳转到默认的`index.html`，这确保前端路由接管[^1]。 - **如果应用部署在子目录**（如`http://example.com/aaa`）：需要指定子路径，避免404错误。 ```nginx server { listen 80; server_name example.com; root /home/xxx/www; # 替换为您的根目录 location /aaa { # 子路径名称 try_files $uri $uri/ /aaa/index.html; # 指向子目录下的index.html } } ``` 引用[^5]针对非根目录部署，强调了`try_files`的使用，确保请求正确重定向[^5]。 #### 步骤2: 调整Vue项目配置在服务器配置的基础上，确保Vue项目正确设置路由和打包路径。 - **Vue路由设置**：使用`createWebHistory`（Vue3）或`mode: 'history'`（Vue2），并指定基础路径（如果部署在子目录）。 - Vue3示例： ```javascript import { createRouter, createWebHistory } from 'vue-router'; const router = createRouter({ history: createWebHistory('/'), // 根目录部署，或改为'/aaa/'用于子目录 routes: [/*...*/], }); ``` 引用[^2]指出，Vue3中使用`createWebHistory`时，需确保基础路径匹配部署环境[^2]。 - Vue2示例： ```javascript import Router from 'vue-router'; const router = new Router({ mode: 'history', base: '/', // 根目录部署，或改为'/aaa/'用于子目录 routes: [/*...*/], }); ``` - **修改publicPath**：在`vue.config.js`中，设置publicPath为相对路径`./`，确保静态资源加载正确。 ```javascript module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/', // 生产环境用'./' }; ``` 引用[^4]提到，将publicPath改为`./`可以解决资源加载问题，避免空白页面[^4]。 #### 步骤3: 其他注意事项 - **重新打包和部署**：修改配置后，运行`npm run build`重新生成dist文件夹，并上传到服务器。确保服务器重启以应用新配置。 - **测试**：部署后，访问不同路由（如`/home`）并刷新页面，应正常显示。如果仍有问题，检查浏览器控制台是否有404错误。 - **备选方案**：如果服务器配置困难，可考虑回退到Hash模式（使用`createWebHashHistory`），但History模式更优，因为它避免URL中的`#`符号[^3]。 #### 常见问题排查 - **404错误**：服务器未正确重定向，检查Nginx配置的`try_files`指令。 - **资源加载失败**：publicPath未设为`./`，导致CSS/JS文件路径错误。 - **非Nginx服务器**：Apache可使用`.htaccess`文件（添加`FallbackResource /index.html`），或参考服务器文档。通过以上步骤，大多数History模式部署问题可解决。如果问题持续，提供更多部署细节（如服务器类型、Vue版本）以便进一步诊断。