nginx vue history非根路径刷新出现404

最新推荐文章于 2025-05-30 09:34:33 发布
最新推荐文章于 2025-05-30 09:34:33 发布
阅读量551 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： 运维 javascript python ViewUI
原文链接：https://my.oschina.net/junko2013/blog/3020950
本文详细介绍了如何在Nginx中配置网站，通过修改conf文件，设置项目路径和默认页面，实现对静态资源的高效管理和错误页面的友好展示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

在nginx对应的网站conf文件里添加以下配置：

location / {
      root   /www/wwwroot/xxx.com/;    #项目路径
      index /index.html;
      try_files $uri $uri/ /index.html;      #匹配不到任何静态资源，跳到同一个index.html
}
 

转载于:https://my.oschina.net/junko2013/blog/3020950

Vue路由history模式采坑：Nginx配置Vue项目刷新页面404
知识改变命运，ヾ(◍°∇°◍)ﾉﾞ【求关注】
05-31 1378
最近部署Vue项目时，刷新页面报404问题
vue3项目history路由模式部署上线405、刷新404问题(包括部分页面刷新404问题)
qq_52686989的博客
07-02 2164
上面这种配置在前端路由和后端接口前缀一致时，也会产生404问题（页面展示 not get/post），因为当你获取某个页面路由时比如/setting，由于Nginx里面配置了代理服务 location /setting， 这会代理到到接口请求，当然就不能获取页面资源了。后端里面：每个路由模块都加一个统一的前缀，比如 ‘/api’；前端里面。
vue-router+nginx 非根路径配置方法
08-27
主要介绍了vue-router+nginx 非根路径配置方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Nginx：vue路由使用history模式刷新404
z69183787的专栏
11-08 3087
在history模式下，只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求，但是当我们直接在浏览器输入这个地址的时候，就会对服务器发起http请求，但是这个目标在服务器上又不存在，所以会返回404。只有最后一个参数可以引起一个内部重定向，之前的参数只设置内部的 URL 的指向。当vue-router使用history模式时，当我们刷新页面或直接访问路径的时候就会返回404，如图。使用 Nginx try_files。例子：根据上面的配置，当请求。
解决Nginx部署Vue项目刷新页面404问题
最新发布
lsk0909的博客
05-30 1352
摘要： Vue等SPA应用部署在Nginx时，刷新子路由会出现404错误，因为Nginx直接查找对应文件路径而非返回index.html。解决方案包括： 修改Nginx配置（推荐）：添加try_files $uri $uri/ /index.html，将所有请求重定向到前端路由； 启用Vue Router的history模式； 改用hash模式（URL含#，不推荐）。 需确保静态资源路径正确，配置后执行nginx -t验证并重载服务。若项目非根路径部署，需同步调整Vue Router的base选项。
Nginx 服务部署 Vue （history）项目后刷新页面 404 问题
0老船长0的博客
10-26 934
表现 VUE使用‘history’路由模式,刷新页面后，则出现 404 Not Found 原因 nginx配置的根目录/xxx/dist下面压根没有’Menu/index’这个资源存在，这些资源都是在js里渲染的。 解决方案 vi nginx.conf 输入命令 i 进入编辑模式 location / { root ... index ... try_files $uri $uri/ /index.html; ---解决页面刷新404问题 } 重启Ngi...
nginx 部署vue项目，路由模式为history时，页面刷新404问题
IT_dabai的博客
04-03 4027
因为打包部署后，地址栏的地址只是vue的路由，并不是真的文件目录地址。所有的路由都是依赖于SPA单页应用的index.html。所以当刷新时，按照地址栏的地址，找不到对应的文件，就产生404。
vue router history模式 线上nginx部署 刷新页面导致404
码农老牛
05-29 1058
在 Vue router 中使用 history 模式时，刷新页面可能会导致 404 错误。这是因为在 history 模式下，Vue 路由器通过修改浏览器的历史记录来实现路由切换，但是当用户直接访问某个 URL 时，服务器端没有相应的处理逻辑，于是就会返回 404。上述配置将尝试查找请求的 URI 文件，如果找不到，则尝试查找以该 URI 开头的文件夹，如果还找不到则返回 index.html，使应用程序可以正确加载并处理该路由。
解决vue router使用 history 模式刷新后404问题
12-09
因为我们的应用是单页客户端应用，当使用 history 模式时，URL 就像正常的 url，可以直接访问http://www.xxx.com/user/id，但是因为vue-router设置的路径不是真实存在的路径，所以刷新就会返回404错误。 想要history...
vue下使用nginx刷新页面404的问题解决
10-16
以上步骤可以有效解决使用Vue.js和nginx部署的单页面应用（SPA）在刷新页面时出现404错误的问题。这种配置使得nginx可以正确地处理所有前端路由的请求，避免了用户刷新页面时服务器尝试访问不存在的文件路径，从而...
vue-router启用history模式下的开发及非根目录部署方法
10-17
本文将详细介绍如何在启用history模式下进行开发，并在非根目录下部署Vue应用。 ### 前端路由的必要性 在传统的多页面应用（MPA）中，每个页面的切换都会重新加载整个页面，这涉及到与服务器的一次完整通信。而SPA...
linux环境配置nginx导致页面不刷新的解决方法
09-15
介绍了linux环境配置nginx导致页面不刷新的解决方法，有需要的朋友可以参考一下
Vue路由使用history模式，nginx下运行，页面刷新404
weixin_41285537的博客
04-28 1887
vue路由使用history模式，nginx下启动，页面刷新404
配置nginx解决vue路由history模式下刷新404问题
weixin_34072159的博客
09-11 1742
在vue路由模式为history的时候，刷新页面会出现404问题。我们只需要在服务器配置如果URL匹配不到任何静态资源，就跳转到默认的index.html。 server { listen 8105; // 表示你nginx监听的端口号 root /home/admin/sites/vue-nginx/d...
vue部署到nginx服务下，非根目录，刷新页面404怎么解决？
新技术革命
04-14 994
location / { proxy_pass http://xxxx; } location /category { root /home/tv; index index.html; try_files $uri $uri/ /index.ht...
vue项目，页面刷新就404了
m0_74823705的博客
12-10 1343
history模式：需要在服务器端配置，确保所有路由都重定向到index.html。hash模式：更简单，不需要服务器端配置，但 URL 中会有。根据你的项目需求和服务器环境选择合适的解决方案。
ruoyi-vue部署在nginx非根目录刷新404（已解决）
weixin_42554373的博客
05-12 5819
我的前端框架用的是ruoyi，已知vue-element-admin框架也是通用的 我是在nginx的html目录下新建多个二级目录存放不同的前端项目 注意步骤： 1.vue.config.js里面的publicPath应该改成"production"？"/你的文件夹名称/":"/"，注意要把前面的/替换成你的nginx的html下前端项目的文件夹名称 2.router文件夹下index.js最下面有个export default new Router，里面的mode：设置成history，设置base：为
Vue History模式刷新404白屏问题解决方案（Gin框架适配）
SuHongMu的博客
03-15 784
API实现URL跳转，不会触发页面刷新。如果直接访问这些路由时，服务端会尝试寻找对应的物理文件，从而导致404错误。前几天在网站上新增了/predict路由，写好后发现每次刷新都会出现404白屏的情况。如果使用nginx上部署vue项目，采用history模式，可以看看这位大佬的文章。Vue-router的history模式通过window.history。查找了资料后，发现是由于后端没有正确配置路由重定向导致。中正确配置路由文件，完善静态文件服务配置。和通配路由 (关键！
vue 项目在 nginx 非根目录下部署时访问404的问题
Blau的博客
05-07 2327
vue 项目在 nginx 非根目录下部署时访问404的问题 当 vue 打包时，如果项目路径不是部署在根目录下时，比如部署在 /new 目录下。这种情况下，使用 简单部署 的方法进行部署会产生 404 错误，即无法找到相关资源，比如静态资源。前端打包配置时部分代码示例如下： // 项目部署基础 // 默认情况下，我们假设你的应用将被部署在域的根目录下, // 例如：https://www.my-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值