vue history 模式nginx配置及配置后刷新 404 的解决办法! 宝塔+tp5+Nginx

最新推荐文章于 2024-10-16 13:59:11 发布

原创最新推荐文章于 2024-10-16 13:59:11 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#nginx #php

本文详细介绍了如何在 Vue.js 的 history 路由模式下配置 Nginx 服务器，以解决刷新页面时出现的 404 错误问题。通过示例展示了具体的配置代码，确保前端路由在刷新时能正确返回 index.html 文件。

这里写自定义目录标题

vue history 模式nginx配置及配置后刷新 404

vue history 模式nginx配置及配置后刷新 404

打开宝塔域名（网站）管理：
在这里插入图片描述

我前端包在名称“INContrarian”，这个名字，切记一定要在你域名下配置文件不在Nginx。

      location /INContrarian{
         if (!-e $request_filename) {
            rewrite ^/(.*) /INContrarian/index.html last;
            break;
        }
      }

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Struggle Road

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue路由history模式采坑：Nginx配置Vue项目刷新页面404

知识改变命运，ヾ(◍°∇°◍)ﾉﾞ【求关注】

05-31

1542

最近部署Vue项目时，刷新页面报404问题

【DvAdmin】解决宝塔的登录提示 nginx 404

Mr数据杨

04-19

774

宝塔面板偶尔出现无法访问的问题大多是由于面板地址配置文件失效所致。通过Linux命令行工具获取最新的面板地址，并重启面板，通常可以解决此类问题。如果忘记了登录信息，也可以通过命令行工具轻松重置。按照本文的步骤操作，能够快速恢复宝塔面板的正常使用。

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

Vue项目在上传宝塔后除首页外页面刷新出现404

qq_68695044的博客

12-24

1135

控制台打开网络可以看到首次进来的时候是正常的刷新一次后请求网址发生了变化，并且出现404这是因为在项目打包后，dist文件中只存在一个index网页，当我们从网址进去后通过路由跳转到达其他页面，关键在这里，当我们在其他页面执行刷新操作，nginx location 是没有相关配置的，所以就会出现 404 的情况。

history 模式刷新 404 问题解决方法

记录每日学习的知识&技术

01-16

3994

这是因为 history 模式依赖于浏览器的 history.pushState API 来管理路由状态，而刷新页面时浏览器会向服务器发送请求，服务器无法正确地解析这些路由并返回对应的页面，从而导致 404 错误。如果你使用的是基于 Node.js 的服务器（如 Express），需要配置服务器以始终返回 index.html 页面，即使在不存在的路由上也是如此。在 Vue CLI 生成的项目中，Vue Router 的配置通常位于src/router/index.js文件中。

Vue项目使用宝塔面板部署刷新404问题

这货有些呆

02-19

2378

如果您在使用宝塔面板部署Vue项目时遇到了刷新404问题，可能是因为您的Nginx配置文件没有正确配置。

vue项目部署到服务器上路由模式为history时，刷新页面报404的问题

tgy003的博客

03-11

951

如果前面两个都匹配不上的话，就会重写到index.html，因为这个index.html使我们项目的入口，index.html里面会读取当时打包好的js文件，就可以读取到路由配置，以实现我们浏览器的url对应的路由页面。root 你的项目路径 //如果前面没配的话,记得加上，前面配了，这一行可以省略。重启 nginx，然后随意刷新浏览器，再也不会出现404 问题了。因为前面配了root路径,所以下面就可以不加root。在nginx配置文件中添加以下配置项。

Vue项目部署Nginx配置文件 SSL

08-11

# 处理 Vue 路由的history模式 } ``` 7. **错误页面处理**： - 你还可以配置自定义的错误页面，例如 404 或 500 错误。 ```nginx error_page 404 /404.html; error_page 500 /500.html; ``` 完成以上配置...

vue3+vue-router4 路由HTML5模式（createWebHistory ），编译后部署到nginx，点击路由跳转正常，但是刷新页面报404

徐同保的专栏

08-07

676

vue3+vue-router4 路由HTML5模式（createWebHistory ），编译后部署到nginx，点击路由跳转正常，但是刷新页面报404

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

08-27

History 模式可以解决这些问题，但是新手往往会碰到 History 模式打包后页面空白的情况，这个问题是因为 Vue 官方没有正确地配置路由的 base 参数所导致的。解决方法是，在 vue-router 的配置中添加 base 参数，...

Vuejs+vue-router打包+Nginx配置的实例

12-01

Vue.js 是一个流行的前端框架，用于构建用户界面。Vue Router 是 Vue.js 的官方路由库，它使得单页应用（SPA...正确的 Nginx 配置加上 Vue Router 的 history 模式，可以实现优雅的前端路由管理，提供出色的用户体验。

VUE+Nginx history路由模式下，解决页面刷新404

趁年轻，多学点

12-30

2067

vue+nginx history模式打包后，刷新404问题

宝塔发布vue项目刷新404

香-农的博客

01-30

365

解决mode: 'history'模式下刷新404；

Vue项目通过宝塔部署之后，页面刷新后浏览器404页面

水w的博客

08-07

1471

Vue项目通过宝塔部署之后，页面刷新后浏览器404页面

（已解决）宝塔部署Vue项目时非首页刷新404

最新发布

BrianGriffin的博客

10-16

1224

部署成功后项目正常运行，但是一但非首页刷新就会报错:404在网页的设置中的配置文件添加上图代码：重启后即可正常运行。

宝塔部署vue刷新404的问题

a2578984130的博客

09-24

525

if (!-e $request_filename) { rewrite ^/(.*) /index.html last; break; }

vue3部署宝塔后请求接口404以及刷新页面404的问题解决方案

????鱼干～

08-05

4315

vue3部署宝塔后请求接口404以及刷新页面404的问题解决方案

宝塔配置vue项目报404错误

ahjxhy2010的博客

09-26

749

原因是需要配置伪静态： location / { if (!-e $request_filename){ rewrite ^(.*)$ /index.html last; break; } } 参考：宝塔nginx运行vue项目刷新404问题解决_u011280778的博客-优快云博客

关于vue3在使用elemnt-plus的上传组件时，明明配置了aixos请求头，为什么后端还是返回401，没有权限。

CHENC0518的博客

11-10

1126

关于vue3在使用elemnt-plus的上传组件时，明明配置了aixos请求头，为什么后端还是返回401，没有权限。

vue history模式页面刷新会导致首页白屏

05-24

在 Vue 中使用 history 模式时，刷新页面会导致页面出现 404 错误或者白屏的问题。这是因为在 history 模式下，后端服务器并没有相应的路由规则，无法正确的响应客户端的请求。解决这个问题的方法是需要在后端服务器上配置一下路由规则，让服务器能够正确的响应客户端的请求。具体实现方式可以参考官方文档中的配置示例。如果你使用的是 Nginx 作为服务器，可以在 Nginx 配置中添加以下代码： ``` location / { try_files $uri $uri/ /index.html; } ``` 这样，当客户端请求一个不存在的路由时，Nginx 会尝试返回 index.html 文件，从而避免了出现 404 错误或者白屏的问题。