vue项目部署到宝塔刷新页面报404错误

已于 2025-03-12 17:51:41 修改
阅读量550 收藏
点赞数 2
文章标签： 前端 vue vue.js elementui 服务器
于 2025-03-12 17:50:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45395283/article/details/146210939
版权

如果在本地运行正常,部署到宝塔,刷新页面报404错误,

需要在宝塔配置一下

设置→配置文件,在server{}中添加以下代码

 location / {
     try_files $uri $uri/ /index.html;
 }

刷新后重新访问,即可发现刷新页面正常

QDKuz
关注
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
水w的博客
08-07 1313
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
宝塔nginx部署前端页面刷新报404
月亮被咬碎成星星的博客
01-14 2832
已解决
宝塔部署vue项目出现的各种问题
getture的博客
09-25 852
使用宝塔面板，网站页面，构建php静态网页。
宝塔linux面板打不开 - 报错404 Not Found（Nginx）
最新发布
BXCQ_xuan的技术专栏 | 实战干货·实践教程·学习笔记
04-18 1015
而且在历史记录中打开同样会出现404错误。这样设置后，您的宝塔面板地址就会保持固定，不会再出现404的问题了。这个命令会重新获取宝塔面板的URL地址和安全入口验证信息。欢迎访问我的博客，获取更多技术文章和教程。首先通过SSH远程连接到服务器。使用面板新给的地址访问面板。
宝塔部署站点，访问出现404、502、页面无法访问~~~超详解
m0_62040326的博客
10-11 3631
1、这个就没啥说的了直接去备案就行了。自己去找找资料，一搜icp备案就出来了~，跟着步骤来就行比较简单，只不过需要审核备案时间略长。据说还有php版本问题，我没遇到过这里就不说了，大家自己去探索吧~~~~1、如果你部署得项目设计Tomcat那么一定检查Tomcat是否开启了。2、检查站点里的默认文档，这里它是有优先级的可以按照下方我这进行修改。1、查看站点里，域名管理中的端口号。3、同时也要确认服务器也添加80端口。2、确认宝塔安全组开放了80端口号。三、Tomcat及站点中的默认文档。
（已解决）宝塔部署Vue项目时非首页刷新404
BrianGriffin的博客
10-16 1042
部署成功后项目正常运行，但是一但非首页刷新就会报错:404在网页的设置中的配置文件添加上图代码：重启后即可正常运行。
Vue项目在上传宝塔后 除首页外页面刷新出现404
qq_68695044的博客
12-24 1080
控制台打开网络可以看到首次进来的时候是正常的刷新一次后请求网址发生了变化，并且出现404这是因为在项目打包后，dist文件中只存在一个index网页，当我们从网址进去后通过路由跳转到达其他页面，关键在这里，当我们在其他页面执行刷新操作，nginx location 是没有相关配置的，所以就会出现 404 的情况。
【宝塔面板404, 登录宝塔面板404】
qq_36926236的博客
02-04 2991
2.因服务器python版本3.6.8, 所以需要从官网下载python3.6.8重新安装 3. 上面的步骤完事以后, 面板正常显示, 但是登录报404 感谢@xiaoniaox 博主提供的思路
2022-07-17 vue项目-通用后台管理系统(十三) 将vue项目部署到nginx服务器上,宝塔面板介绍和使用
GAARA
07-17 568
一.vue项目打包并部署到nginx服务器(window环境) 1.项目打包 对于通过vue-cli脚手架创建的项目 在根目录cmd,并输入打包命令 2.nginx的html文件夹下粘贴打包好的项目文件 3.在有nginx.exe的页面cmd,输入命令开启服务器 4.其他 把dist文件中的文件粘贴到HTML文件夹下面 配置nginx 配置结束后重新加载 二.使用宝塔面板部署vue项目 1.宝塔面板介绍
Vue项目服务器部署刷新页面404
Tang__CT的博客
05-04 2989
Vue项目服务器部署刷新页面404 问题描述 在上线vue开发的前端网页部署在服务器上后，刷新页面显示404 原因 因为网页上显示的是静态绝对路径 而实际上服务器上是没有改路径的，多以导致刷新汇报错误 解决方法 在Vue框架中解决404 vue router mode 默认为hsas，这样的url中会带有#，如果改成mode:'history'就能去掉#号，也可以正常访问，但是再次率先你页面就会出现404 const router = new Router({ mode: 'history' }
uniapp(vue)打包web项目页面刷新后报404解决方案
Jiaberrr的博客
10-12 2061
在使用uniapp进行跨平台开发时，不少开发者会遇到页面刷新后出现404错误的问题。本文将为大家详细解析这一问题的原因及解决方案，帮助大家顺利解决此类问题。
宝塔面板部署项目，页面刷新时出现nginx404问题
wings14的博客
08-08 1420
当宝塔部署完项目，使用项目出现页面刷新nginx404问题；
Vue项目使用宝塔面板部署刷新404问题
这货有些呆
02-19 2053
如果您在使用宝塔面板部署Vue项目时遇到了刷新404问题，可能是因为您的Nginx配置文件没有正确配置。
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面。
记录开发过程中收获哪些技能、每个项目的心得、遇到的坑。
12-01 3648
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面。
宝塔面板 - 404 Not Found（Nginx）
10-24 5537
宝塔面板 - 404 Not Found（Nginx）
宝塔部署vue项目刷新404解决方案
m0_62726200的博客
06-27 449
如果从首页打开，点击任何页面都能够正常访问，而当你处在某个页面（非首页）的时候，刷新就出现了404错误。把build出来的dist文件夹部署到生产环境，使用宝塔傻瓜式部署项目，问题就来了。vue路由是history模式。
node网站 宝塔 面板配置 防止刷新404
阿乐的博客
02-09 1026
我现在配置了一个网站 后台项目 放到了宝塔上 将相应的域名和项目都配置好了 域名也可以访问 但是有的时候 出现了404。将这个代码复制下来 配置相应的端口号 放到配置文件的底部 保证文件正确 这样就实现了 刷新不出现404 的问题。其实这个问题的原因是nginx 的问题 反向代理的原因。类似这种404 这个资源找不到。在这个配置文件中 有个配置文件。
宝塔面板部署Vue项目刷新页面404问题及解决
weixin_43923808的博客
06-01 492
【代码】宝塔面板部署Vue项目刷新页面404问题及解决。
宝塔404解决办法
weixin_62713795的博客
03-06 152
进入远程界面，输入bt，再输入14，查看面板信息，在面板信息中的地址中进入即可。
宝塔部署前端刷新
03-27
### 宝塔面板前端项目配置伪静态规则以解决刷新页面404问题 在宝塔面板中部署前端项目时，如果使用 Vue 或 React 等基于单页应用（SPA）的技术栈，并且路由模式设置为 `history` 模式，则可能会遇到刷新页面时报 404 错误的情况。这是因为服务器未正确处理 SPA 路由请求，而是将其视为实际路径请求。 #### 解决方案概述 为了使前端项目能够正常运行并避免刷新页面时出现 404 错误，可以通过调整 Nginx 配置来实现。具体方法如下： --- #### 步骤一：编辑 Nginx 配置文件 进入宝塔面板的网站管理界面，选择对应的站点，点击 **“设置” -> “配置文件”** 进入 Nginx 配置区域。在配置文件中添加以下内容[^3]： ```nginx location / { try_files $uri $uri/ /index.html; } ``` 此配置的作用是告诉 Nginx 将所有未匹配到实际文件或目录的请求重定向至 `index.html` 文件，从而让前端框架接管这些请求并解析成正确的路由。 --- #### 步骤二：保存并重启 Nginx 完成上述配置后，记得保存更改并点击 **“重新加载 Nginx”** 按钮以使新配置生效。此时，即使用户刷新页面或访问深层链接，也不会再触发 404 错误。 --- #### 步骤三：验证配置效果 打开浏览器访问已部署的前端项目，尝试刷新任意子页面或直接输入 URL 地址进行测试。如果一切正常，应该不会再看到 Nginx 默认的 404 页面，而会显示项目自定义的内容。 --- #### 注意事项 1. 如果仍然存在权限问题（如 403 Forbidden），需确认 Nginx 用户是否有权访问项目根目录下的文件。可以在 Nginx 配置中指定用户身份，例如： ```nginx user root; # 修改为root用户, 不修改的话可能页面会出现403 forbidden; ``` 同时确保项目文件夹具有适当的读取权限[^5]。 2. 对于 Apache 环境下部署的 Vue 项目，同样需要配置 `.htaccess` 文件以支持历史路由模式。典型配置如下[^4]: ```apache <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] </IfModule> ``` --- #### 总结 通过合理配置 Nginx 的 `try_files` 指令或其他服务器的相关规则，可以有效解决前端项目在刷新页面时产生的 404 错误问题。这不仅适用于 Vue.js 项目，也同样适合其他采用类似架构的应用程序。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值