Nginx 多项目部署，vue刷新404 解决方案

已于 2024-02-01 16:40:22 修改
阅读量525 收藏 9
点赞数 8
CC 4.0 BY-SA版权
文章标签： php nginx
于 2024-02-01 16:36:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42678049/article/details/135977239
本文提供了一个关于在TP6前端官网和VUE后台管理系统部署中遇到404错误的解决方案，通过分享Nginx配置图片，帮助读者快速解决问题。

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

网上找的资料大多都解决不了，废话不多说直接告诉你解决方法。

环境是 TP6  VUE前端官网 + VUE 后台管理 部署 两个项目 刷新 404

解决方案 Nginx 配置 直接贴图

如果解决了，给我顶起来，让更多人 快速的解决。

Vue/React单页面应用部署到nginx服务器时，错误解决以及刷新404
10-29 1426
一般来说，SPA 通过前端路由来管理页面导航，而刷新页面时，Nginx 直接尝试加载当前 URL 的资源，却找不到对应的文件，从而导致 404 错误。将项目部署到var/www目录中，然后修改nginx里面的root路径地址为var/www中。这样，当用户在登录页面或其他页面刷新时，Nginx 会将请求重定向到。将 Nginx 配置修改为以下内容，以确保所有请求都可以重定向到。可能是没有将dist文件夹放置到var/www/目录中，因为。，让前端的路由逻辑来处理 URL。，即用户请求的资源。
Nginx 部署 Vue 项目刷新页面出现404
weixin_43966635的博客
08-20 929
问题 使用Vue.框架，利用vue-route编写了一个单页路由项目，运维协助在服务器端配置nginx。部署完成后，访问首页没问题，从首页里打开二级页面没问题，但是所有的二级页面打开后，再次刷新，就会出现404现象。 原因 刷新页面时访问的资源在服务端找不到，因为此时vue-router设置路由地址被当作url地址，此时的地址路径肯定不是真实存在的，所以出现404现象。这些访问资源都是在js里渲染。 解决方案 在nginx配置里添加vue-route的跳转设置 server { ....
关于nginx+vue,同域名访问多个不同项目，刷新404问题的解决方法
weixin_42522460的博客
09-12 2042
同一个域名，通过不同路径 www.xxxx.com，www.xxxx.com/project2，www.xxxx.com/project3的方式来访问到不同项目，也就是我一共是3个项目共用一个域名，其中一个项目是域名直接指向的，不带有其他路径，也就是www.xxxx.com可以直接访问一个项目。这个问题困扰了我两天，按照网络上各种方法，试了又试，都不适合我的这种情况。访问www.xxxx.com，是直接触发location / {} 这个配置项，flag=0，直接访问到项目即可。
vue项目 部署到nginx 上刷新页面显示404
qq_30517167的博客
07-25 3179
在Vue项目部署到Nginx服务器上时，遇到刷新页面显示404的问题，通常是因为Nginx无法正确地处理Vue路由（尤其是单页面应用（SPA）中的前端路由）。Vue应用的路由是前端路由，依赖于JavaScript来动态解析URL，当直接访问除根路径外的URL时，Nginx默认会尝试在服务器上找到对应的文件或目录，如果找不到就会返回404错误。为了解决这个问题，你需要配置Nginx，使得所有请求都重定向到Vue应用的入口文件（通常是。（或类似的命令）构建完成，并且所有的构建文件（包括。
如何在nginx里面配置两个或者多个项目，并且解决vue项目部署后刷新访问404以及跨域问题（全网最详细）
qq_56826081的博客
09-16 2314
添加上方所标红的代码即可解决，主是原因的打包时使用的模式是history模式，在该模式下实际所访问的地址是端口号后面的位置，但是我们后端其实并没有该访问接口，前端的端口、ip、协议会丢失，添加上方的代码就是告诉浏览器，让它按照地址栏的地址去访问（这也是我们所希望的。
nginx 配置 client_max_body_size 解决上传大文件的问题
丙火的博客
07-29 1190
解决文件上传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
解决 nginx部署多个vue项目刷新、访问路由页面404
qq_39079061的博客
05-17 4168
解决 nginx部署vue项目刷新、访问路由页面404 问题： 使用nginx 部署vue项目的时候 当我们刷新页面的时候，或者访问路由配置页面的时候会直接提示< font clor=red>404！ 分析 这个问题不是BUG，而是因为通常我们做的vue项目属于单页面开发。所以只有index.html。解决这个问题也很简单。只需要将访问重定向到 index.html这个页面。交由 index.html 去处理对应的路由跳转就好. 刷新页面时访问的资源在服务端找不到，由于vue-router设置的
vue下使用nginx刷新页面404的问题解决
10-16
在使用Vue.js构建的前端项目中，尤其是使用了现代前端技术栈如Vue Router进行路由管理时，部署到生产环境后可能会遇到在使用nginx作为反向代理服务器时刷新页面导致的404错误问题。这个问题通常是由于nginx的默认...
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
08-27
总结起来，解决Vue项目在Tomcat上使用History模式刷新报404错误的步骤包括： 1. 在打包后的项目根目录下创建`WEB-INF`文件夹，并在其中创建`web.xml`。 2. 编写`web.xml`，设置404错误重定向到`index.html`。 3. 在...
nginx部署vue项目 刷新404
最新发布
07-03
### 解决 Nginx 部署 Vue 项目刷新页面返回 404 错误的方案 Vue 是典型的单页应用（SPA），其路由机制依赖前端 JavaScript 控制，而非传统的服务器端路由。当使用 `history` 模式时，URL 路径如 `/about` 并不对应...
Vue项目服务器（nginx）部署刷新页面404
qq_44674174的博客
07-16 1358
nginx 部署后刷新出现404问题，vue router mode 默认为hsas，这样的url中会带有#**。改成mode:'history’就能去掉#号。上传代码首页能正常点击到其他页面，但是在其他页面点击刷新则会显示。因为网页上显示的是静态绝对路径，实际上服务器上是没有该路径的。2.修改nginx配置文件（1.Vue中添加代码解决。
Nginx部署vue项目
Ianguoxy的博客
04-17 173
ng配置修改的配置如下：<listen>：代理端口（自定义未被占用的端口号）<server_name>：代理名称（域名、ip），本地就用localhost<root>：项目存放目录（如果只发布一个项目，就是直接把dist拷贝到html文件夹下这种情况，可以直接用html，否则要指定文件夹）<try_files>：一个覆盖所有情况的候选资源。如果 URL 匹配不到任何静态资源，返回同一个 index.html 页面。
Nginx刷新后白页（404 Not Found）
qq_22841387的博客
06-20 6364
通过在 Nginx 中使用try_files指令，可以解决 SPA 前端项目在刷新页面时出现 404 错误的问题。这种方法让 Nginx 在找不到请求的文件时，将请求转发给前端的index.html，由前端框架来处理不同的路由。该方法不仅适用于部署多个前端项目，还能在任何单页面应用部署时帮助解决类似问题。希望这篇教程能帮助你顺利完成 Nginx 配置并解决项目中的 404 错误！
Nginx 部署 Vue.js 应用时的 404 错误解决经历
leptune99的博客
10-22 566
在我最近的一个项目中，我遇到了一个让我抓狂的问题：使用 Nginx 部署的 Vue.js 应用，在访问某些路由时，刷新页面竟然出现了 404 错误。查找半天后，最终找到了解决方案。。。
vue-router部署到nginx，刷新出现404现象（nginx下部署多个vue）
sinat_29740819的博客
02-25 5798
vue-router部署到nginx，访问首页没问题，从首页里跳转其他页面也没问题，但是非首页的其他页面，再次刷新，就会出现404现象。（本地正常） 配置如下图： 由于nginx下需要配置多个vue工程，所以需要重定向，使得访问路径为 ip:port/project/ 但是直接在地址栏访问  ip:port/project/upload 出现404，程序内部跳转则正常，这是因为vue-r...
nginx 部署多个vue项目, 静态资源404
weixin_40502536的博客
07-30 1957
nginx 部署多个vue项目, 静态资源404 1: 路由配置 const RouterConfig = { base: '/aa/', mode: 'history', routes: [ ... ] }; 2: vue.config.js配置 module.exports = { publicPath: '/aa/', devServer: { host: '0.0.0.0', ... } } 3: nginx配
nginx踩坑之vue页面404问题
Fortuna_的博客
08-06 1597
新项目上线需要部署，部署环境为 nginx + gunicorn + supervisor + vue + flask 前端的路由名有/api前缀，而我后端的接口地址没有这个前缀，所以在nginx转发的时候没有将/api前缀去掉，导致后端识别不了请求过来的地址而返回404错误 比如前端的路由是/api/getuserlist?page=1 , 后端的实际接口地址是/getuserlist 所以是识别不了的 需要在nginx转发的时候在gunicorn绑定地址后加上一个斜杠可以解决。当然这只是404的其
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值