用ngnix部署vue打包的项目，一旦刷新就404

最新推荐文章于 2025-12-03 11:05:25 发布
原创 最新推荐文章于 2025-12-03 11:05:25 发布 · 184 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #nginx #前端

当使用history模式时，nginx可能无法正确处理路由。为了解决这个问题，需要在nginx的配置文件中location块内添加try_files指令，设置为try_files$uri$uri//index.html，这将确保未找到具体文件时加载index.html，从而支持单页面应用的history模式路由。

这个问题可能是因为你使用的是history模式，而nginx服务器默认并不支持history模式。你可以尝试将nginx服务器配置文件中的以下内容添加到location块中，以支持history模式：

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

司戊
关注
【Nginx 】Nginx 部署前端 vue 项目
m0_74825746的博客
01-17 1716
在两种系统中，安装Nginx的过程都相对简单，主要区别在于使用的软件包管理器不同。这包括访问Vue应用的主页，以及尝试访问应用中的各个路由，确保它们都能正确加载。文件中列出的依赖项进行下载和安装，这个过程通常需要联网操作，并且依赖于npm仓库的响应速度。在网络状况良好的情况下，安装过程可以顺利完成。在CentOS或RHEL系统上安装Nginx的过程与Ubuntu/Debian略有不同，主要体现在软件包管理器的使用上。在项目部署之前，确保开发环境中已安装Node.js和npm，这是运行Vue项目的基础。
解决vue项目nginx部署到非根目录下刷新空白的问题
12-09
1、修改config/index.js 2、修改路由route/index ...以上这篇解决vue项目nginx部署到非根目录下刷新空白的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue项目history模式刷新404问题
FGGIT的博客
02-01 7124
vue项目history模式刷新404问题
nginx 配置 client_max_body_size 解决上传大文件的问题
丙火的博客
07-29 1218
解决文件上传HTTP错误（413） 编辑 nginx.conf #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { includ
Vue项目nginx服务器部署刷新页面404错误
07-27 4800
vue项目nginx服务器部署刷新页面和打开新页面报404错误
Vue项目如何进行部署？是否有遇到部署服务后刷新404问题？
illion booked
03-01 995
vue项目部署问题
vue项目路由使用history模式，nginx配置，刷新页面显示404
weixin_43845550的博客
11-13 400
【代码】vue项目路由使用history模式，nginx配置，刷新页面显示404。
NGINX 安装包 安装 使用 VUE项目 打包 部署 刷新404
wyangue的博客
08-28 380
还需要继续学习，掌握多个serve同时部署的技术。
nginx 部署前端vue项目
热门推荐
我哎GIS博客
09-02 3万+
Nginx是一款轻量级的HTTP服务器，采用事件驱动的异步非阻塞处理方式框架，这让其具有极好的IO性能，时常用于服务端的反向代理和负载均衡。优点支持海量高并发：采用IO多路复用epoll。官方测试Nginx能够支持5万并发链接，实际生产环境中可以支撑2-4万并发连接数。内存消耗少可商业化配置文件简单 除了这些优点还有很多，比如反向代理功能，灰度发布，负载均衡功能等。
nginx部署vue项目，刷新页面导致报错404
m0_67204726的博客
05-19 316
修改nginx的nginx.conf配置文件，添加try_files $uri $uri/ /index.html;
解决vue打包项目后刷新404的问题
08-27
总之，解决Vue打包后刷新404的问题主要是通过正确配置服务器，确保所有请求都能导向Vue应用的入口HTML文件，让前端路由有机会处理路由跳转。通过理解这一机制，你可以更好地管理和部署Vue应用，提供更流畅的用户体验...
nginx下部署vue项目的方法步骤
09-29
在部署Vue项目到Nginx服务器时，首先需要了解Nginx是一个高性能的HTTP和反向代理服务器，其通过将静态内容服务、负载均衡、缓存等技术相结合，提供了一种高效、可靠和灵活的方式，用于在生产环境中托管Web应用。...
Vue3常用的组合式API 超详细讲解
最新发布
只会写bug
12-03 275
Vue3响应式系统核心API解析：ref与reactive的底层原理、使用场景及对比 摘要： Vue3的响应式系统基于Proxy实现，主要提供ref和reactive两个基础API。ref通过包装对象处理基本类型（需.value访问），兼容复杂类型时会自动转为reactive；reactive直接代理对象/数组，支持深层属性响应。两者各有适用场景：ref适合基本类型和需要替换整个对象的场景，reactive适合简单对象操作。此外，computed提供响应式派生值并具有缓存机制。使用时需注意：ref避免直接覆
数码商城系统|电子|基于SprinBoot+vue的数码商城系统(源码+数据库+文档)
伟庭的博客
12-02 524
本文介绍了一个基于SpringBoot和Vue.js开发的数码商城系统。系统采用B/S架构，包含前台用户模块（商品浏览、购物车、会员中心）、后台管理模块（用户、商家、商品分类管理）和商家模块（商品发布、抢购活动）。使用MySQL数据库存储数据，Redis缓存高频访问数据，并采用Redisson分布式锁解决抢购超卖问题。系统实现了商品多级分类、动态属性、库存预警等功能，通过定时任务管理活动上下架，集成富文本编辑器支持资讯发布。该系统有效降低了运营成本，提高了电商管理效率。
计算机毕业设计|基于springboot + vue零食商城管理系统(源码+数据库+文档)
12-03 327
本文介绍了一个基于SpringBoot+Vue的零食商城管理系统。系统采用前后端分离架构，后端使用SpringBoot框架简化开发流程，前端采用Vue.js实现响应式界面，数据库选用MySQL存储数据。文章详细阐述了系统设计原则、技术选型理由，并提供了代码片段和测试用例参考。此外还包含毕设选题推荐和源码获取方式，适合作为计算机专业毕业设计的参考项目。系统功能完善，技术栈主流，具有实际应用价值。
医院随访管理系统源码 患者随访管理系统源码 智能随访系统源码 出院随访系统源码，基于Java+Vue前后端分离架构
爱笑的源码博客
11-29 412
摘要：医院随访管理系统是一款基于Java+Vue前后端分离架构开发的智能平台，集成了患者信息管理、随访计划设定、自动提醒等功能。系统支持个性化随访计划制定（按病种/药品/患者分类）、内置丰富的随访知识库和问卷模板，提供本地电话接入和录音功能。通过自动推送提醒、多形式随访记录、审核管理和数据分析等功能，有效提升诊后随访效率和质量，为临床治疗优化和药品疗效评估提供数据支持。系统采用Springboot+MySQL技术栈，实现医院随访工作的规范化、智能化管理。
如何在Vue3中使用组合式API？
只会写bug
12-02 1080
Vue3组合式API通过<script setup>语法糖简化开发流程，无需手动导出组件。核心特性包括：使用ref处理基本类型响应式数据，reactive处理对象/数组，toRefs保持解构响应式。生命周期钩子如onMounted需按需导入，计算属性computed用于派生值，方法直接定义即可在模板调用。这些特性使代码更集中、复用更灵活，适合现代前端开发需求。
vue3 封装一个在el-table中回显字典的组件
收集、分享
12-02 599
vue3 封装一个在el-table中回显字典的组件
基于Vue的企业管理系统pk6uy（程序 + 源码 + 数据库 + 调试部署 + 开发环境配置），配套论文文档字数达万字以上，文末可获取，系统界面展示置于文末
2509_93101891的博客
12-01 895
设计并实现一套功能完善、操作便捷、扩展性强的基于Vue的企业管理系统，具体目标包括： 实现企业资源全生命周期管理，覆盖采购、入库、领用、调拨、维修、报废等核心流程。 提供实时数据统计与可视化分析功能，支持资产分布、使用率、维护成本等多维度查询。 构建用户权限体系，确保数据安全与操作合规性。 探索Vue.js与后端框架（如Django）的最佳实践，形成可复用的技术方案。
nginx部署vue项目 刷新404
07-03
### 解决 Nginx 部署 Vue 项目刷新页面返回 404 错误的方案 Vue 是典型的单页应用（SPA），其路由机制依赖前端 JavaScript 控制，而非传统的服务器端路由。当使用 `history` 模式时，URL 路径如 `/about` 并不对应实际的静态文件路径。Nginx 默认会尝试查找该路径对应的文件或目录，若找不到则返回 404 错误 [^5]。 为了解决这个问题，需要在 Nginx 的配置中设置 `try_files` 指令，将所有请求重定向到 `index.html`，从而由 Vue 自身处理路由逻辑 [^1]。 #### 修改 Nginx 配置 以下是一个完整的配置示例： ```nginx server { listen 80; server_name your_domain; # Vue 项目的根目录 root /path/to/your/vue/dist; index index.html; location / { try_files $uri $uri/ /index.html; } # 可选：优化静态资源加载 location ~ \.(js|css|png|jpg|gif|ico|woff2|woff|ttf|svg)$ { expires max; log_not_found off; } } ``` 上述配置中的关键点是 `try_files $uri $uri/ /index.html;`，它表示如果请求的文件或目录不存在，则跳转到 `index.html`，从而让 Vue Router 接手后续的路由处理 [^2]。 #### 其他注意事项 - **路径一致性**：确保 `root` 指向的目录与 Vue 项目打包后的输出目录一致，通常是 `dist` 文件夹。 - **权限问题**：检查 Nginx 是否有权限访问该目录，必要时调整文件权限或用户组 [^3]。 - **缓存清理**：浏览器缓存可能导致旧配置生效，建议清除缓存或使用隐身模式测试。 - **重启服务**：修改配置后需重启 Nginx 以使更改生效： ```bash sudo systemctl restart nginx ``` #### 验证效果 部署完成后，直接访问子路由路径（如 `/about` 或 `/article/123`）并刷新页面，应能正常显示内容而不再出现 404 错误 [^4]。 ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值