VUE项目通过nginx部署，刷新产生404

最新推荐文章于 2024-07-25 15:48:40 发布
原创 最新推荐文章于 2024-07-25 15:48:40 发布 · 578 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

文章讲述了在遇到系统不自动刷新且通过浏览器手动刷新时出现404错误的情况，通过修改Nginx的location配置，将`try_files`指令加入以解决这个问题。

系统不刷新是正常的，浏览器刷新通过路由访问报错404

通过修改nginx的配置来实现。修改前：

location / {
  root html/dist;
  index /index.html;  
}

修改后：

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


 

ken_coding
关注
vue项目nginx部署刷新报错404
知识改变命运，ヾ(◍°∇°◍)ﾉﾞ【求关注】
12-23 676
最近部署VUE项目，刷新后提示404
【Nginx 】Nginx 部署前端 vue 项目
m0_74825746的博客
01-17 1703
在两种系统中，安装Nginx的过程都相对简单，主要区别在于使用的软件包管理器不同。这包括访问Vue应用的主页，以及尝试访问应用中的各个路由，确保它们都能正确加载。文件中列出的依赖项进行下载和安装，这个过程通常需要联网操作，并且依赖于npm仓库的响应速度。在网络状况良好的情况下，安装过程可以顺利完成。在CentOS或RHEL系统上安装Nginx的过程与Ubuntu/Debian略有不同，主要体现在软件包管理器的使用上。在项目部署之前，确保开发环境中已安装Node.js和npm，这是运行Vue项目的基础。
vue工程部署到docker后刷新出现404解决方案
weixin_43250455的博客
10-24 1180
vue工程部署到docker后刷新出现404解决方案 参考 https://blog.csdn.net/weixin_33695082/article/details/92719764 的修改， 修改nginx配置文件，增加对vue-route跳转，如下设置后，在docker中可以正常刷新。 server { listen 80; server_name localhost; #charset koi8-r; access_log /var/log/ng
nginx 部署vue3项目 页面404
sinat_37012541的博客
04-30 3621
vue3 vite 部署到nginx 刷新404 500等问题处理
Nginx使用vite部署vue3项目 页面刷新404
weixin_41705627的博客
09-04 6551
最近使用vue3的vite构建了一个新项目，在本地测试时是好好的没有什么问题，但是一发到服务器上刷新页面就会出现404，这样肯定会导致用户体验非常不好，于是我开始翻阅资料，找到几种处理方法
dockerfile解决nignx镜像部署vue刷新404
controller_Lw的博客
05-24 1014
问题描述 由于安全问题，客户现场的同事部署的Docker环境，nginx部署vue刷新404，这个问题在nginx 修改配置文件很简单的问题，由于本人也没有真正的接触过docker，我们这个边提出让他修改nginx的config 配置，对方提出修改docker 去解决这个问题。 一下是解决方案，我也是刚接触docker文件，先模仿学习，等以后经验多一点在分享个人想法。 FROM nginx:latest MAINTAINER iron.guo VOLUME /tmp ENV LANG en_US.UTF-8
Docker中通过nginx部署vue3项目的路由刷新404问题
TwiStar的博客
10-13 483
vue3项目通过nginx服务器部署到Docker中，路由路径刷新404问题。
解决vue项目nginx部署到非根目录下刷新空白的问题
12-09
1、修改config/index.js 2、修改路由route/index ...以上这篇解决vue项目nginx部署到非根目录下刷新空白的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue下使用nginx刷新页面404的问题解决
10-16
以上步骤可以有效解决使用Vue.js和nginx部署的单页面应用（SPA）在刷新页面时出现404错误的问题。这种配置使得nginx可以正确地处理所有前端路由的请求，避免了用户刷新页面时服务器尝试访问不存在的文件路径，从而...
nginx下部署vue项目的方法步骤
09-29
将Vue项目部署到Nginx上，可以让Vue应用通过Web服务器进行访问，并且可以享受到Nginx提供的性能优化和安全特性。 在部署前，我们需要准备好Vue项目的构建产物，通常是一个dist文件夹，这个文件夹包含了编译打包后的...
vue项目 部署到nginx 上刷新页面显示404
qq_30517167的博客
07-25 3263
在Vue项目部署到Nginx服务器上时，遇到刷新页面显示404的问题，通常是因为Nginx无法正确地处理Vue路由（尤其是单页面应用（SPA）中的前端路由）。Vue应用的路由是前端路由，依赖于JavaScript来动态解析URL，当直接访问除根路径外的URL时，Nginx默认会尝试在服务器上找到对应的文件或目录，如果找不到就会返回404错误。为了解决这个问题，你需要配置Nginx，使得所有请求都重定向到Vue应用的入口文件（通常是。（或类似的命令）构建完成，并且所有的构建文件（包括。
Vue项目部署后，刷新提示404
云在青天水在瓶
01-06 5978
一、遇到的问题 Vue项目打包部署到线上后，刷新页面会提示404。这是因为网页访问的是静态绝对路径，而服务器上没有该路径。 二、解决方法 方法一： 修改src/router/index.js文件中的mode属性，设置为hash。（这种调整，会使url出现"#"） 方法二： 调整nginx.conf配置文件 ...
vue部署docker下的nginx刷新404
m0_46269902的博客
07-19 1024
部署到nginx，访问首页没问题，从首页里跳转其他页面也没问题，但是非首页的其他页面，再次刷新，就会出现404现象。 Dockerfile '# 使用官方镜像，官方镜像比较纯净，没有curl等网络工具，需要安装网络工具需要自己构建nginx镜像 FROM nginx '# 将你的打包目录(h5)拷贝到 nginx镜像指定目录中 COPY h5/ /usr/share/nginx/html/ '# 将自定义的配置文件覆盖默认的配置文件 COPY default.conf /etc/nginx/conf.d/d
vue项目部署到服务器上刷新页面一直404
qq_41838435的博客
12-24 2093
项目是基于vue-admin-template开发的，部署到阿里云服务器之后，只要点击刷新，就一直404，情况如下： 最后发现是服务代理的问题，代理信息写错了，修改代理信息就好了。解决方案如下： 因为我遇到而问题是修改mode类型就解决了，其他情况的解决办法可参考：https://blog.csdn.net/weixin_42863883/article/details/106661250 ...
关于vue项目部署后刷新页面出现404
Nancy的博客
05-06 499
vue部署到nginx刷新页面404的解决方案
Docker部署Vue项目404问题
weixin_44355908的博客
09-22 2575
这个404页面是nginx缺省的，并不是自己vue项目的，网上查阅资料后搞定问题，记录一下 原因 刷新页面时访问的资源在服务端找不到，因为vue-router设置的路径不是真实存在的路径。如上的404现象，是因为在nginx配置的根目录/Data/app/xqsj_wx/dist下面压根没有loading这个真实资源存在，这些访问资源都是在js里渲染的 Dockerfile # 设置基础镜像，这里使用最新的nginx镜像，前面已经拉取过了 FROM nginx # 定义作者 MAINTAINER Abc
docker中使用nginx进行多个vue部署以及为什么部署完成后会404的原因
qq_32234547的博客
01-20 1387
因为对nginx不熟，同事也都是一些实习生，很多东西他们也不熟悉，导致要在nginx加入其他项目进行运行，导致一直404，我在网上找了很多方法，都进行了尝试，发现都没效果，后面我也发现了docker中的nginx和通过tar解压的方式有些不同，所以纪录一下这个问题的解决方式。 1.安装nginx,(我这个是下载最新版本的，想下载自己想要的版本，请在docker pull nginx:版本号,如果没了解过docker的可以往前看我的docker博客)，其他的安装方式就跟我之前写的docker安装nginx是
Nginx - Docker 容器化 Nginx 部署前端 Vue 项目访问 404
08-05 1796
Nginx - Docker 容器化 Nginx 部署前端 Vue 项目访问 404
Nginx笔记-vue项目刷新出现404（try_files和index）
IT1995的博客
09-04 3746
try_files 更加可靠， 首先会查找"$uri"下的这个文件，如果不存在会查找$uri/,如果还不存在就会重定向到 /index.html页面。如果最后参数写错了，就会导致500的服务器错误。index 就是根目录，也就是只识别“/”结尾的，输入不存在或者刷新页面的路径就直接报nginx的404了，而不会重定向到index.html。部署是成功了，但是有个问题，就是感觉整个前端不会找uri，按F5或者在浏览器输入url都会404，只从vue默认的地方进，才行。
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
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值