Vue打包后刷新页面显示404或者not get ***错误

最新推荐文章于 2024-07-11 11:54:27 发布
原创 最新推荐文章于 2024-07-11 11:54:27 发布 · 787 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了Vue单页应用中history模式下出现404错误的原因，并提供了解决方案。通过使用node.js的connect-history-api-fallback库，可以避免因路由变化而导致的后端请求错误。

引

首先要知道的一点就是，Vue 打包形成的是单页面应用，很明显，就只有一个 index.html和好几个 js 文件
然后再开发的过程中，hsah 模式下的路由会多个# ，所以会显得很难看，大家都会使用 history 模式，这样就导致了这个问题。
hash 模式下的路由变化不会发生对后端的请求，但是history模式下，会出现路由变化导致请求的发生，而单页面应用只有index文件，默认一般都是在 / 根目录下，所以当在其他页面的时候，发生请求，会出现后端没有配置而返回的 404.

方法

网上有很多用 nginx 的方法，但是在本地实验的时候很麻烦，所以在使用nodejs作为后端的时候可以使用这个库

connect-history-api-fallback

//俩行代码即可
var history = require('connect-history-api-fallback')
 
app.use('/',history());

问题解决！！！！

Vue + SpringBoot项目服务器部署后浏览器刷新页面404错误分析和解决方案
qq_37225921的博客
09-01 4300
先贴解决方案代码，再分析原因 VUE前端代码 在App.vue页面的routet-view中加入v-if代码 <router-view v-if="isRouterAlive"></router-view> 再在App.vue页面js代码里引入provide方法并在data中声明变量isRouterAlive以及在method中添加reload方法 export default { name: 'app', provide() { return {
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
水w的博客
08-07 1444
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
VUE页面刷新问题
weixin_33971205的博客
01-15 1313
1). location方式 location.reload() 缺点：刷新页面，卡白 2). router方式 this.$router.go(0) 缺点：同一问题，比一好点 3). provide/inject方式 App.vue <router-view v-if="isRouterAlive"></router-view> <script> ex...
【Vue3】发布为dist后，刷新路由页面出现404错误或Cannot GET /category错误（已解决）
【敦厚的曹操】的专栏
05-20 1035
试了N多方法没有解决，最后，在router的配置文件index.js中，把createWebHistory换成createWebHashHistory,解决了！
解决vue项目本地开发完成后部署到服务器后报404的问题
多看书少吃饭的博客
03-06 3990
vue项目本地开发完成后部署到服务器后报404是什么原因呢？
Vue打包的项目部署服务器之后，其他路由刷新页面时显示404
豪先生的博客
06-16 2766
有的朋友就会有疑虑，为什么在vue项目开发的时候不会出现这种问题呢？因为在vue项目开发的时候是访问自己的8080服务器,后端有进行处理，在刷新界面后找不到相对路径时，会重新渲染index.html界面，把路由的控制权交给前端，然后前端负责路由的匹配，在找到符合/test/123 这种格式的路由后,就会匹配成功。vue router mode 默认为hsas，这样的url中会带有#，如果改成mode:'history'就能去掉#号，也可以正常访问，但是再次率先你页面就会出现404。
Vue 项目布署后，刷新页面（或跳转页面）出现 404 解决办法
是微风，是晚霞，是无可替代
08-23 9300
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 website.com/#/login 只有 website.com 会被包含在请求中 ，因此对于服务端来说，即使没有配置location，也不会返回404错误。由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问 https://example.com/user/id，就会得到一个 404 错误。一个杯子，早上装的牛奶，中午装的是开水，晚上装的是茶，我们可以发现，变的始终是内容，而容器还是那个容器。
go打包vue静态资源 & 解决页面刷新404问题【赵烧鸡腿饭~】
weixin_44586943的博客
06-06 1634
go打包vue静态资源 & 解决页面刷新404问题【挨踢君】 前言 最近在做一个go + vue的项目，快做完的时候告诉我要把vue和go一起打包，这个问题一下子就难道我了啊，以前都是把vue放到nginx中去跑，打包到go还没玩过，毕竟我也是个go的菜鸟。好吧，开搞，查资料……测试……无线循环，终于搞好了打包的问题，结果页面无法进行刷新，点击浏览器的刷新按钮页面直接404。无奈，继续找资料，但是这方面的资料太少了，只找到的在tomcat中怎么解决这个问题，go里面几乎没有。咋办呢，自己搞呗，功夫不
vue3项目history路由模式部署上线405、刷新404问题(包括部分页面刷新404问题)
qq_52686989的博客
07-02 2254
上面这种配置在前端路由和后端接口前缀一致时，也会产生404问题（页面展示 not get/post），因为当你获取某个页面路由时比如/setting，由于Nginx里面配置了代理服务 location /setting， 这会代理到到接口请求，当然就不能获取页面资源了。后端里面：每个路由模块都加一个统一的前缀，比如 ‘/api’；前端里面。
vue-cli3打包上线后后台接口404错误（vue-cli3.11版本）
qq_37021104的博客
12-21 4272
vue项目在开发模式时，使用的axios调用的后台接口，而使用axios调用后台接口，需要在vue.config.js中配置proxy代理，否则会出现请求头错误，而设置了proxy代理后，vue项目打包proxy代理就会失效，因为proxy代理并不会一起打包到dist文件夹下，网上的说法都是配置不同环境新建env文件及更换baseurl等，但是我发现这种做法在vue3.11版本中并不适用，直接根据...
Vue3打包发布,刷新出现的空白页面和错误
weixin_44600235的博客
07-11 1591
Vue3打包发布出现的错误：Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of text/html. Strict MIME type checking is enforced for module scripts per HTML spec.
vue3+ts+history路由模式项目打包部署后刷新显示页面404
qq_57483942的博客
05-08 2003
最近本博主的做了一个医疗的前端开发项目，已经完工了，下面是对部署过程的总结和项目打包部署后刷新显示页面404问题的解决方案。
vue history模式
weixin_34387284的博客
05-23 397
2019独角兽企业重金招聘Python工程师标准>>> ...
vue打包之后，刷新页面出现404的问题
高山景行，一尘不染
09-07 4609
我这边用的是node.js的express，解决方法是： 参考官网：https://github.com/bripkens/connect-history-api-fallback 首先安装： npm install --save connect-history-api-fallback 在app.js里面引入： var history = require（' connect-hi...
关于vue打包后上传服务器刷新404的问题
热门推荐
ahzhaihui的博客
08-30 1万+
一：nginx服务器解决方案，修改   .conf  配置文件    有两种解决方案 1： location / { try_files $uri $uri/ @router; index index.html; } location @router { rewrite ^.*$ /index.html last; } 2： location / {...
网页刷新后出现404
chuozongxiao7597的博客
04-10 4690
在linux下搭建nginx测试网页的时候，正常打开可以访问，当刷新后页面出现404 not found的问题 说明： vue-router默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 如果不想要很丑的 ...
单页面模式路由刷新404问题
u013234218的博客
04-14 7624
自己开发中遇见单页面模式在路由上面刷新页面丢失找不到页面问题，在网上找了些资料然后在这里来总结一下。
解决vue项目打包界面和背景图片报错 404
SHALLNY
05-05 6733
项目进展到最后，vue框架即将完工了，在最后到打包中，又遇到一个大坑 npm run build 在执行命令打包后，发现打开dist文件内的index.html后，界面空白，并且在控制台处报错为404，查找不到对应到css。 此时为路径问题，解决方法为： 找到项目文件夹内到config –&gt;index.js –&gt;修改路径‘./‘ 此时重新打包即在浏览器可以完美打开了...
uniapp的h5打包后GET https://web.meizhongtj.cn/test/web/pages/index/ 404 (Not Found)
最新发布
06-18
<think>我们正在解决UniAppH5打包后访问路径404错误的问题。根据引用内容，我们可以分析出几个可能的原因和解决方案：1.**publicPath配置问题**（引用[2]）：-在`manifest.json`文件中，H5配置节点下可以设置`publicPath`，用于指定静态资源的CDN地址。如果设置不当，可能导致资源路径错误。2.**路由模式冲突**（引用[3]）：-UniAppH5项目有两种路由模式：hash模式（URL中有#）和history模式（无#）。history模式需要服务器端进行伪静态配置，将所有前端路由请求重定向到`index.html`，否则会出现404错误。3.**部署路径问题**（引用[1]）：-打包时设置的路径如果带有多余的斜杠（如`h5/zhihuishouda/`），可能导致资源路径错误，需要检查并修正。针对404错误，我们可以按照以下步骤进行排查和解决：###步骤1：检查路由模式-在`manifest.json`中，确认H5的路由模式配置。如果是history模式，则必须进行服务器伪静态配置。```json"h5":{"router":{"mode":"history"//或"hash"}}```-如果使用hash模式，则一般不会出现404问题，因为路由信息都在#后面，服务器会忽略。-如果使用history模式，则必须配置服务器将所有非静态资源请求重定向到`index.html`。###步骤2：服务器伪静态配置（针对history模式）-以Nginx为例，需要添加如下配置：```nginxlocation/{try_files$uri$uri//index.html;}```或者，如果项目部署在子目录（如`/web`）下，则配置应为：```nginxlocation/web{try_files$uri$uri//web/index.html;}```具体参考引用[3]中的示例。###步骤3：检查publicPath配置-在`manifest.json`中，如果静态资源部署在CDN或非根路径，需要设置`publicPath`（引用[2]）：```json"h5":{"publicPath":"http://cdn.example.com/static/",//或者相对路径，如"./static/"}```确保该路径正确指向资源位置。###步骤4：检查打包路径-在打包时，注意基础路径（basePath）的设置。如果项目部署在子目录下（如`/h5`），则需要在`manifest.json`中配置：```json"h5":{"publicPath":"./",//或具体子目录路径"router":{"base":"/h5/"//注意这里设置基础路径}}```同时，确保服务器上的部署目录与基础路径匹配。###步骤5：清除缓存并重新打包-修改配置后，重新打包项目，并确保部署到服务器时覆盖了旧文件。同时，清除浏览器缓存或使用无痕模式测试。###示例配置以下是一个完整的`manifest.json`中H5配置的示例（根据实际情况调整）：```json{"h5":{"publicPath":"./","router":{"mode":"history","base":"/h5/"//如果部署在根目录则去掉此项，如果部署在子目录则设置为子目录路径}}}```###总结404错误通常由以下原因引起：-history模式未配置服务器重定向-静态资源路径（publicPath）配置错误-部署路径与配置不匹配请根据上述步骤逐一排查。如果问题仍然存在，请提供更多信息（如路由模式、部署环境、服务器配置等）以便进一步分析。§§相关问题§§1.如何配置Nginx服务器支持UniAppH5的history模式？2.UniAppH5打包后资源路径错误（如图片不显示）如何解决？3.UniAppH5项目部署到子目录时需要注意哪些配置？4.如何优化UniAppH5项目的加载速度？</think>### UniApp H5打包404错误解决方案 404错误通常由**路由模式配置**或**部署路径问题**引起，以下是系统解决方案： #### 一、核心问题诊断 1. **路由模式冲突** - 使用`history`模式时，服务器未配置URL重定向规则（引用[3]） - 默认`hash`模式（URL带#）无需服务器配置，但影响美观 2. **部署路径错误** - 打包路径中的多余斜杠导致资源路径错误（引用[1]） - 静态资源未正确指向CDN或服务器路径（引用[2]） 3. **服务器配置缺失** - Nginx/Apache未配置前端路由重定向 - 子目录部署时路径不匹配（引用[3]） --- #### 二、解决方案 ##### 方案1：修正打包路径配置 在`manifest.json`中修改H5配置： ```json { "h5": { "publicPath": "./", // 关键！去掉末尾斜杠 "router": { "mode": "history", // 或 "hash" "base": "/your-subdir/" // 子目录部署时设置 } } } ``` > 注意：`publicPath`末尾的斜杠是常见错误源（引用[1]） ##### 方案2：服务器伪静态配置 **Nginx配置示例**（部署在`/web`子目录）： ```nginx location /web { try_files $uri $uri/ /web/index.html; } ``` **Apache配置**（`.htaccess`）： ```apache <IfModule mod_rewrite.c> RewriteEngine On RewriteBase /web/ RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /web/index.html [L] </IfModule> ``` ##### 方案3：CDN资源路径修正 若使用CDN，需同步配置： ```json { "h5": { "publicPath": "https://cdn.example.com/static/", // CDN完整路径 } } ``` > 确保CDN目录结构与打包输出一致（引用[2]） --- #### 三、验证步骤 1. 本地测试打包路径： ```bash uniapp build --platform h5 ``` 检查`dist/build/h5`目录结构是否完整 2. 部署后检查： - 访问`/index.html`应返回200 - 刷新任意路由页面不应出现404 - 浏览器控制台无资源加载错误 3. 路径检查清单： - ✅ `publicPath`无多余斜杠 - ✅ 服务器重定向到`index.html` - ✅ CDN路径与本地资源匹配 > 提示：优先使用`hash`模式可降低配置复杂度（引用[3]） --- #### 四、进阶调试 若仍出现404： 1. 检查路由守卫逻辑是否拦截路径 2. 使用`vue-devtools`检查路由对象 3. 在`onLaunch`中打印路由信息： ```js export default { onLaunch() { console.log('当前路径:', window.location.pathname) } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值