部署前端工程到Nginx，点击浏览器刷新界面时出现404错误解决办法

最新推荐文章于 2024-04-30 19:23:17 发布
原创 最新推荐文章于 2024-04-30 19:23:17 发布 · 2.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #nginx #运维

该博客探讨了Nginx配置中`try_files $uri $uri/ /index.html;`指令的作用，该指令在无法找到指定URL对应的静态资源时，会重定向到index.html，实现单页应用的路由处理。理解这一配置对于前端开发者优化网站加载和管理路由至关重要。

在这里插入图片描述

解决办法

在这里插入图片描述
try_files $uri $uri/ /index.html;
这句配置的意思是每次匹配url路径时候找不到对应静态资源时候调制跳转到index.html文件

【Nginx 】Nginx 部署前端 vue 项目
m0_74825746的博客
01-17 1737
在两种系统中，安装Nginx的过程都相对简单，主要区别在于使用的软件包管理器不同。这包括访问Vue应用的主页，以及尝试访问应用中的各个路由，确保它们都能正确加载。文件中列出的依赖项进行下载和安装，这个过程通常需要联网操作，并且依赖于npm仓库的响应速度。在网络状况良好的情况下，安装过程可以顺利完成。在CentOS或RHEL系统上安装Nginx的过程与Ubuntu/Debian略有不同，主要体现在软件包管理器的使用上。在项目部署之前，确保开发环境中已安装Node.js和npm，这是运行Vue项目的基础。
httpslocalhostindex 配置的nginx，一刷新就报404了
m0_74825360的博客
02-10 492
index.html。
Node.js前端程序通过Nginx部署后刷新出现404问题的解决办法
runwuwushengxiyu的博客
08-18 317
Node.js前端程序通过Nginx部署后刷新出现404问题的解决办法
前端代码部署到nginx后，刷新报错404
My blog
08-12 1328
前端代码本地运行没问题，部署到nginx后，刷新报错404. vue路由模式改为history后，需让后端nginx配置try_files，否则资源访问不到。
404异常:This application has no explicit mapping for /error, so you are seeing this as a fallback.
招财猫的博客
09-03 1950
404异常:This application has no explicit mapping for /error, so you are seeing this as a fallback. 原因1: Application启动类的位置不对.要将Application类放在最外侧,即包含所有子包 原因:spring-boot会自动加载启动类所在包下及其子包下的所有组件. 这种情况会导致所以在Ap...
nginx 部署vue3项目 页面404
sinat_37012541的博客
04-30 3641
vue3 vite 部署到nginx 刷新404 500等问题处理
解决 Nginx 部署 Web 项目刷新报错 404
比起未来可期，我更喜欢如约而至
11-01 3382
项目打包 run build//打包项目文件 项目上传 在目录/var/www/html下新建项目文件夹，将打包后的项目dist文件夹中的内容copy过去。 添加配置文件 配置文件的内容 重新启动服务 nginx -s reload 配置成功 浏览器输入地址，看到页面，配置成功。 ...
win11 nat网络下部署nginx 在nginx下部署前端项目
2201_75750665的博客
04-19 1449
在这个过程中我遇到了：无法加载文件 C:\Users\hp\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本 的问题，解决办法见。2.安装pcre，pcre是一个perl库，包括perl兼容的正则表达式库，nginx的http模块使用pcre来解析正则表达式，所以需要安装pcre库。3.安装zlib，zlib 库提供了很多种压缩和解压缩的方式，nginx 使用 zlib 对 http 包的内容进行 gzip。选择：输入A选择全是，或者输入Y选择是 都可以的。
nginx下部署vue项目的方法步骤
09-29
在部署Vue项目到Nginx服务器时，首先需要了解Nginx是一个高性能的HTTP和反向代理服务器，其通过将静态内容服务、负载均衡、缓存等技术相结合，提供了一种高效、可靠和灵活的方式，用于在生产环境中托管Web应用。...
纯前端解决--发版后导致浏览器页面缓存出现问题
m0_46875453的博客
01-17 1747
试了很多种方法，如在.html页面的meta中添加cache-control；nginx中配置缓存策略；在文件打包中加上时间戳；都没有很好的作用，最终选择前端本地版本号。
nginx前端页面出现跨域报错问题
云深海阔专栏
02-18 1731
nginx前端页面出现跨域报错问题 'Access-Control-Allow-Origin' header contains multiple values '*, *', 解决办法： location / { if ($request_method = 'OPTIONS') { add_header Access-Control-Allow-Origin *; add_header Acces
nginx静态资源配置和错误排查
Hiroshi's
06-20 1069
这是我的nginx.conf配置文件: 这是nginx根目录： 里面有个test文件夹，test文件夹里面有一个find_me.html页面和另一个文件夹xxoo： find_me.html打开是这样的： xxoo文件夹里面也有一个find_me.html: xxoo里面的find_me.html打开是这样的： 到此为止，我们在nginx根目录里面的静态资源都准备好了，下面在非nginx根目录中的静态资源，我们就在系统根目录新建一个data文件夹： data中有两个文件夹image和w...
关于 nginx 404错误问题  按照这样配置就没有毛病
qq_28958027的博客
03-08 358
关于 nginx 404错误问题 按照这样配置就没有毛病 location / { root D://dist; index index.html index.htm; try_files $uri $uri/ @router; } location @router { rewrite ^.*$ /index.html last; ...
There was an unexpected error (type=Not Found, status=404). /kind/WEB-INF/page//kindEditor.jsp
Ripley的博客
10-31 1万+
There was an unexpected error (type=Not Found, status=404). /kind/WEB-INF/page//kindEditor.jsp在idea编译器中一个工程只有一个窗口，用习惯啦eclipse的工作区间可以多工程同时显示的，突然换风格有点不习惯，还好idea支持工程与模块之间的”无缝“切换。在idea中可以使用一个空工程中新建多个模块工程来达
There was an unexpected error (type=Not Found, status=404). /WEB-INF/jsp/index.jsp问题解决
river106的博客
01-17 1万+
SpringBoot集成JSP时遇到如下问题： There was an unexpected error (type=Not Found, status=404). /WEB-INF/jsp/index.jsp。 项目结构如下： 解决方法： 1、首先确认下maven中是否有如下依赖： <dependency> <groupId>org.apache.tomcat.embed</groupId>
nginx部署前端项目后刷新浏览器报错404
java李阳勇的博客
12-13 8654
nginx部署前端项目后刷新浏览器报错404。
前端部署nginx刷新后404，解决Nginx刷新页面后404的问题
每一步，都在缩短你与梦想的距离。
06-21 4万+
使用Nginx部署后，登录页面刷新一下就出来404，如下图：刷新以后 ，页面变成404 Not Found查看了一下nginx配置，出现问题的配置是这样的：
Nginx部署和配置完成后404的解决方法
热门推荐
weixin_45837076的博客
11-22 13万+
意思就是，找指定路径下的文件，如果不存在，则转给哪个文件执行（具体是哪个文件得按项目来）；我这里是没找到之后返回默认的index.html文件。2.测试一下刚刚修改的配置文件是否有问题，使用命令：nginx -t -c nginx安装目录下的conf下的nginx.conf。如果一个地址是localhost:8080/login，那么uri指的是login地址,uri/指的是login文件夹，启动：双击nginx.exe，双击后有个小黑窗会闪过去，或者打开任务管理器，看下任务进程。
Nginx 报404问题，如何解决
劉汉卿的博客
11-17 11万+
部署Nginx时，若出现404问题的一种解决方法
docker部署前端vue nginx
最新发布
03-13
### 使用Docker部署基于Vue.js和Nginx的前端应用程序 为了实现这一目标，需要创建一个适合于生产环境的构建流程并将其容器化。以下是详细的说明： #### 准备工作 确保已经完成项目的开发阶段，并且能够通过`yarn run build`命令成功编译项目[^4]。 ```bash yarn run build ``` 这一步会生成位于`dist`目录中的静态资源文件，这些文件就是最终要被Nginx提供服务的内容。 #### 创建Dockerfile 在项目根目录下新建名为`Dockerfile`的文件，内容如下所示： ```dockerfile # 使用官方Node镜像作为基础镜像来安装依赖项 FROM node:alpine AS builder WORKDIR /app COPY package*.json ./ RUN npm install COPY . . # 构建应用 RUN npm run build # 切换至nginx镜像以供实际运行时使用 FROM nginx:stable-alpine # 复制之前构建好的静态文件到默认的html目录中 COPY --from=builder /app/dist /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] ``` 此多阶段构建方法先利用Node.js环境执行构建过程，再切换到轻量级的Nginx镜像用于发布静态页面，从而减小了最终镜像大小。 #### 构建与启动容器 有了上述准备之后，就可以按照下面的方式来进行操作了： - **构建 Docker Image** ```bash docker build -t vue-frontend-app . ``` - **启动 Docker Container** 可以直接使用简单的`docker run`指令或者更推荐的做法是采用`docker-compose.yml`定义服务组合以便管理和维护更加方便。 对于单个容器来说: ```bash docker run -d --name VueFrontendApp -p 80:80 vue-frontend-app ``` 如果选择使用Docker Compose，则需编写相应的配置文件如`docker-compose.yml`: ```yaml version: '3' services: web: image: vue-frontend-app ports: - "80:80" restart: always ``` 接着可以通过以下命令一键启动整个栈： ```bash docker-compose up -d ``` 这样就完成了从源码到可访问Web站点的过程，在浏览器里输入服务器IP地址即可看到由Vue.js驱动的应用界面。 #### 配置Nginx支持历史模式路由 为了让Vue Router的历史模式正常运作，还需要适当调整Nginx设置使得所有未匹配到具体文件路径的请求都被重定向回首页处理。这部分已经在提供的Nginx配置片段中有体现[^2]: ```nginx location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } ``` 这段配置保证即使刷新页面也不会因为找不到对应URL而报错，而是交还给前端框架去解析路由。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值