Vite3打包发布后刷新总是跳转到404页面问题的解决

最新推荐文章于 2025-04-14 15:19:25 发布

今天没bug

最新推荐文章于 2025-04-14 15:19:25 发布

阅读量2k

点赞数

文章标签：前端 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_44492855/article/details/129436358

版权

当前端路由模式设置为history时，服务器可能无法识别无‘#’的URL，导致404错误。解决这个问题的方法是将前端路由模式改回hash或者调整nginx服务器的配置文件，确保能正确处理这些路径。

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

404报错原因：

当我们设置了mode为history时，当前端发送路径给服务端时，服务端根本就不认识省去#的url，所以返回给我们404。

解决办法：

前端将路由模式改成hash
调整nginx.conf配置文件

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

今天没bug

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue3+vite - 打包编译后页面白屏、CORS跨域、加载js/html文件失败、图片不显示、音视频不显示问题，解决打包生成index.html页面显示空白、找不到资源、报资源跨域打不开报错问题！

高级前端工程师

05-30

1万+

vue3，vite，build，打包编译，vite打包后页面白屏，index.html，dist，跨域，CORS报错，图片不显示，资源js加载出错，部署服务器后打开，页面空白，网页不显示，浏览器控制台，全是报错，vite+vue3执行build打包后index.html无法打开怎么办，打不开咋办，啥也不显示，index.html打开空白，打开cors跨域怎么解决，网页上线后一刷新就报错，上线后，typescript，ts，404-Page Not Found，vite build后访问报错，Vite+Vue

vue3 + vite：打包部署后，动态组件渲染404问题解决

小先生编程

02-01

1809

问题描述：当需要渲染动态组件，动态的组件路径配置在数据库中时，如下图，本地运行能正常访问，用vite打包部署后，生产上改路径为404.起初认为是，vite打包后的文件都是.js, 当页面加载后从数据库拿来的路径是.vue, 并且是src/xxx/xxx.vue 这种绝对路径形式的，所以就找不到文件了。

参与评论您还未登录，请先登录后发表或查看评论

Nginx使用vite部署vue3项目页面刷新404

weixin_41705627的博客

09-04

5965

最近使用vue3的vite构建了一个新项目，在本地测试时是好好的没有什么问题，但是一发到服务器上刷新页面就会出现404，这样肯定会导致用户体验非常不好，于是我开始翻阅资料，找到几种处理方法

Vue3+Vite前端项目部署后部分图片资源无法获取、动态路径图片资源报404错误的原因及解决方案

最新发布

RenGJ010617的博客

04-14

3529

本篇博文详细分析了 Vue3 + Vite 前端项目在反向代理部署后，部分图片（动态路径图片）无法加载的问题。通过分析问题的原因，并结合三种解决方案（放弃动态渲染、提前引入图片资源、修改 base 路径），我们可以有效地解决这一问题。希望本篇文章能为大家解决类似问题提供帮助。

记录Vite3打包发布后刷新总是跳转到404页面问题的解决

nnslyx的博客

09-24

4555

配置nginx设置，解决Vite3打包发布后刷新总是跳转到404页面的问题

在NGINX部署了vite + vue3 + vueRouter4项目后，出现404问题的解决办法，包括配置了try_files后，刷新仍然404的解决办法

x_bai_IT的博客

05-10

882

我的项目使用的是vite+vue3+vueRouter4，项目打包后项目部署在nginx服务器中，出现刷新404问题，根据vue-router文档添加try_files后刷新仍然404。

关于静态资源打包上线后404的解决办法

Grace_yue_wr的博客

07-16

1033

部署测试环境加入上下文后静态资源报404错误，排查后发现，img标签中src属性值用变量形式引入的本地资源都找不到了，线上资源以及写死的串形式是可以找到的。

vue3+ts+history路由模式项目打包部署后刷新显示页面404

qq_57483942的博客

05-08

1866

最近本博主的做了一个医疗的前端开发项目，已经完工了，下面是对部署过程的总结和项目打包部署后刷新显示页面404问题的解决方案。

Vue 打包部署到服务器后，非主页刷新后出现404问题解决

weixin_46180637的博客

08-20

1059

服务器部署

解决 VueCLI3 项目打包上线刷新 404 的问题

hedeqiang

05-15

2715

最近我创建的极客返利平台采用前后分离的方式。前端框架主要是 VueCLI 搭建的。但是项目打包上线以后出现二级页面 404 的问题。例如 /about 页面。刷新就会出现 404 。或者直接复制二级页面重新打开同样也是 404。最终经过一番搜索，解决方案如下： Nginx 例如使用 Nginx 部署，须做如下修改即可 location /{ error_page 404 /index.html; } 重启 Nginx 即可。 sudo service nginx restart Ap

VUE项目打包发到Docker二次刷新页面报404错误问题解决

wujize的博客

06-10

1092

将VUE项目打包后发布到Docker的Nginx服务器后，基本使用正常，发现前端有一个404错误，但页面显示正常，在退出登录后，跳转到404页面，便这个404页面是nginx缺省的，并不是自己vue项目的，参考网上资料后搞定了此问题，特此记录：一、原因刷新页面时访问的资源在服务端找不到，因为vue-router设置的路径不是真实存在的路径。如上的404现象，是因为在nginx配置的根目录/Data/app/xqsj_wx/dist下面压根没有loading这个真实资源存在，这些访问资源都是在js里渲染的

【问题记录】解决vite多页应用路由改用history之后本地刷新404问题

Kuroko's Development Notes

05-30

3516

当前项目是一个多页应用配置，将路由从默认的hash模式改为history模式之后，本地开发环境刷新页面404

vue3 + vite2 打包部署后 404 解决方案

03-24

1万+

vue3 + vite2 打包部署后 404 解决方案 404现象解析如果在开发环境没问题，但是部署后（部署到服务器的非根目录的情况时）出现很多相关的js，css文件报404，那么可以看一下index.html中的资源引用，如果都是/assets开头，那么这个时候就需要修改配置文件，重新打包了。解决办法在vue2中我们在config/index.js文件中配置了 assetsPublicPath:’./’，同理，vue3中也需要配置这个属性，vue3中vite生成的项目，没有config文件夹，

vite打包页面空白不显示，静态资源404

ztwelve的博客

11-02

2453

vue3 vite打包构建GitHub pages或上传服务器时，出现打包后的js和css加载失败以及图片不显示问题

项目部署到子目录，路由跳转却到主域名下？正常能访问一刷新就404？——路由模式的困扰

typ的blog，记录工作中的问题、学习中的笔记、生活中的感想。

05-16

617

项目部署到子目录，路由跳转却到主域名下？正常能访问一刷新就404？关于路由模式解决方法

[踩坑] Vue项目部署后刷新页面就404

qq_53008257的博客

08-01

2149

history模式中会出现这样的问题，具体原因看大佬的解释好像是因为路由跳转是js操作，直接输入路径（或刷新路径后），服务器没有匹配的处理方法，因此需要将请求转交给js去执行。今天部署将vue3+vite项目部署在nginx上，运行是没有问题，就是只要一刷新页面，就会报404，之前也部署过vue2+vuecli的项目，并没有出现过这种错误。经过一番查资料发现并不是，问题是出在之前vue2项目使用的vue-router是。(路径中有#)，而这个项目使用的vue-router是。...

vite vue+.net发布到iis后，页面404，接口405解决方法

qq_42371986的博客

05-07

1337

这个可以按具体需求调整，看完文章应该能确定是否需要。

vite+vue3打包后部署nginx Failed to load module script，空白页，404，反向代理等问题。

m0_50360903的博客

03-23

3585

vite打包部署项目到nginx可能会遇到的全部问题。

【浅谈vue3代理】Vue3访问接口404，访问接口跨域怎么解决

赏樱看雪撸代码

05-13

6202

在用vue3调用接口请求404状态，vue3调用接口跨域，报错： Access to XMLHttpRequest at ‘xxx’ from origin 'xxx' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the reques

vue3 vite 实现版本更新自动刷新

12-26

在Vue3和Vite中实现版本更新自动刷新的方法下： 1. 配置Vite插件：在vite.config.js文件中，可以使用versionUpdatePlugin插件来实现版本更新自动刷新。该插件可以在每次打包生产代码时，在public目录下生成一个version.json版本信息文件，并将版本号定义为全局变量__APP_VERSION__。同时，该插件还可以监控版本迭代更新，并在页面跳转时，通过请求服务器端的version.json文件和浏览器本地缓存的版本号进行对比，从而实现页面自动更新。 ```javascript // vite.config.js import { defineConfig } from 'vite' import versionUpdatePlugin from './versionUpdatePlugin' export default defineConfig((config) => { const now = new Date().getTime() return { define: { __APP_VERSION__: now, // 定义全局变量__APP_VERSION__ }, plugins: [ // 使用versionUpdatePlugin插件 versionUpdatePlugin({ version: now, }), ], // 其他配置项... } }) ``` 2. 创建versionUpdatePlugin插件：在项目根目录下创建一个名为versionUpdatePlugin.js的文件，并在该文件中定义versionUpdatePlugin插件。 ```javascript // versionUpdatePlugin.js export default function versionUpdatePlugin(options) { return { name: 'version-update-plugin', apply: 'build', generateBundle(_, bundle) { const version = options.version const versionInfo = { version: version, } const versionJson = JSON.stringify(versionInfo) // 在public目录下生成version.json文件 this.emitFile({ type: 'asset', fileName: 'version.json', source: versionJson, }) // 其他操作... }, } } ``` 通过以上配置，每次打包生产代码时，会在public目录下生成一个version.json文件，并将版本号定义为全局变量__APP_VERSION__。在页面跳转时，可以通过请求服务器端的version.json文件和浏览器本地缓存的版本号进行对比，从而实现页面自动更新。