前端打包history模式下出现的路径丢失问题刷新页面404问题

最新推荐文章于 2024-12-11 09:46:56 发布

前端小鸡

最新推荐文章于 2024-12-11 09:46:56 发布

阅读量388

点赞数

文章标签：前端

本文链接：https://blog.youkuaiyun.com/m0_53164768/article/details/130855332

版权

修改服务器配置文件, 确保不同路由的访问都指向同一文件index.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端小鸡

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

使用 Vue Router 的 History 模式遇到的问题及解决方法

RoGroovy的博客

09-22

1591

在使用 Vue.js 开发前端应用时，Vue Router 是一个常用的路由管理工具。它提供了多种路由模式，其中一种是 History 模式，它使用 HTML5 的 History API 来实现路由的切换，不会在 URL 中出现 hash。然而，在使用 Vue Router 的 History 模式时，可能会遇到一些问题。下面我将介绍一些常见的问题，并提供相应的解决方法。

vue3项目history路由模式部署上线405、刷新404问题(包括部分页面刷新404问题)

最新发布

m0_74825447的博客

12-24

982

上面这种配置在前端路由和后端接口前缀一致时，也会产生404问题（页面展示 not get/post），因为当你获取某个页面路由时比如/setting，由于Nginx里面配置了代理服务 location /setting，这会代理到到接口请求，当然就不能获取页面资源了。后端里面：每个路由模块都加一个统一的前缀，比如 ‘/api’；前端里面。

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

vite vue-router history 打包，页面空白问题解决方案

lie_sun

12-11

1699

总结一下history模式部署时需要改动的地方如果是部署在根目录下，只需要改nginx配置即可，前端配置无需修改如果是部署在二级目录下(如部署在/newpage目录)，修改内容如下nginx配置vue-router配置vite.config配置此致遍大功搞成了！！！

uniapp打包H5下history模式下刷新页面丢失处理

baidu_33055905的博客

10-08

1745

解决方案：https://www.cnblogs.com/zyfenblog/p/13865523.html

vue项目部署到服务器上，使用history路由模式引起二级路由页面丢失的问题解决方法

weixin_49210760的博客

05-21

3752

路由配置第一次可以出现，再划线就丢失 1.首先如果想要在前端使用hisroty模式的时候需要后端的配置后盾配置一般固定下面是我们后端的配置，仅供参考其中有关history刷新丢失的问题,在于划线的try file 再看前端设置 1.切换路由模式，这个省略 2.需要在vue.config.js中配置publicPath 如图所示如果想要在开发和生产的时候都用history模式就按照上面的判断环境变量设置这里注意在开发的时候，如果你的项目没有做特殊的处理那么想要使用history就的设.

记录一次 vite 配置别名路径打包时出错的bug

qq_42372534的博客

06-22

1265

vite多页应用,由于在vite.config.ts中define中配置的常量pages,而路径别名也有pages,所有导致打包时替换路径出错,将pages常量注释掉就好了。

vue路由history模式刷新页面时页面丢失时常见的两种解决方法

Galin的博客

02-27

7136

方法一： 1 2 3 4 5 6 7 8 location /{ root /data/nginx/html; index index.html index.htm; if (!-e $request_filename) { rewr...

vue路由history模式刷新页面一片空白，也不报错（解决方案）

热门推荐

Z.Dragon 的博客

11-07

1万+

如果项目不在根目录下，路由需添加配置(base) router/index.js mode: 'history', base: '/h5/', config/index.js build assetsPublicPath: '/h5/', 后台配置代码：引用链接 END. ...

vue build本地预览与路由History模式下页面空白

qq_45576685的博客

03-09

928

vue build本地预览与路由History模式下页面空白和图片路径找不到前言一、本地模拟服务器测试二、启动我们的本地预览服务器,执行npm run xx 类型的命令 vue build本地预览与路由History模式下页面空白和图片路径找不到前言不知道有没有前端小白和我一样，遇到同样的问题 vue 路由mode:‘history’ 模式下，开发环境页面可以正常访问，但是打包后本地测试出现问题（有没有人和我一样，本地测试也不会的，以前hash模式下，直接把dist文件夹下的index.html从浏览

前端常见面试基础问题

qq_43119615的博客

07-10

1827

一、自我介绍 1.1 姓名、毕业院校(可说可不说)、项目经历、年龄和工作年限少谈二、vue相关 2.1 路由模式:哈希模式和history模式的区别 1.路径表现的外观上: 在vue的路由配置中有mode选项最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的 2.本质上: hash-----虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。 history -----利用了 HTML5 History I

hash路由模式与history路由模式

麦呢头冷的博客

11-02

8873

1. hash路由模式 hash模式：使用 URL 的 hash 来模拟一个完整的 URL, 其显示的网络路径中会有 “#” 号 hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash后刷新, 也不会有问题 hash模式示例: http://localhost:8080/#/home http://localhost:8080/#/user 参考: hashChange 2. history模式 history模式：美化后的hash模式，路...

处理基于nginx上线项目后，history模式下出现的刷新后路由丢失问题

lalunr的博客

12-12

866

处理基于nginx上线项目后，history模式下出现的刷新后路由丢失问题

VueRouter 使用 mode: ‘history‘ 嵌套路由打包路径错误的问题

lee576的专栏

11-04

1360

VueRouter 默认是hash模式，但是url上会带上#字符，非常不好看，会影响一些场景下的url解析， history 模式下没有 #，但是history 模式下对打包就出现了路径不对的问题，通过修改项目根目录下 \build\webpack.prod.conf.js 解决 output: { publicPath: '/', path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[.

VUE用webpack打包上线，页面出现空白，各种路径出错（每天都记录一个知识点）

vuex的学习笔记

04-20

448

**第一：懵逼还是懵逼只能怪自己webpack学的不好，看来要重头好好学习一下webpack了 ** 解决：找到 config > index.js build: { index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dir...

vue打包后路径失效、找不到、404的问题

csdn_chengpeng的博客

10-09

2788

vue打包路径丢失的问题在vue项目打包以后，本地打开项目会出现css、js路径404的问题，这是因为vue打包后的路径默认是根路径。解决方法：在vue.cofign.js文件中将 publicPath: ‘/’, 更改为 publicPath: ‘./’,（如果没有vue.cofign.js文件，需要自行创建一个） ...

vue-cli history 本地开发刷新页面丢失_react 开发入门

weixin_39836530的博客

12-07

352

安装react 直接通过命令安装：npm install -g create-react-app创建本地服务器直接通过命令安装：create-react-app first-demo(first-demo为app名称)启动运行直接通过命令安装： cd first-demo npm start修改测试按照提示修改程序app.js文件，修改后页面会自动刷新。三子棋游戏初始化删除s...

vue history模式部署在服务器端的nginx配置 (非根目录)

weixin_33872566的博客

11-14

1238

vue history需要nginx或者其他方式配置一下才可正确访问，否则路由跳转之后刷新一下便会404 具体原因vue-router官网有说明，在此不多说最近遇到的问题是上了一个小的项目，需要放在更深层次的目录下，上到测试环境做了官网提到的nginx配置发现不行，之后查阅了一些博客资料，发现都没有一个特别好的方案。最终，我的解决方案...

Vue3.2项目打包后404问题

weixin_42612454的博客

06-12

1117

这种配置常用于使用前端框架（如 Angular、React、Vue.js）构建的单页应用程序，其中所有的路由都由前端框架处理。通过将所有请求重写到。具体来说，这个配置块告诉 Nginx 在处理请求时，无论请求的是什么路径，都将其重写到。此时发现进去首页之后，只要不是根路径，就会404，刷新也会。项目路由是使用 createWebHistory 模式的。这是一个 Nginx 的配置语法，它定义了一个名为。，确保前端框架能够正确处理这些请求并呈现相应的页面。标志表示这是重写规则链的最后一个规则。

Vue在Tomcat部署下二级页面刷新404问题

fmyahxm的博客

09-25

2714

解决：在 webapps 文件下添加如下目录在目录中填加文件在xml文件中写入 <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="ht...

开发过程中，本地环境下Vue-router在history模式下二级页面刷新404问题

12-14

在Vue.js开发过程中，使用Vue-router的history模式时，二级页面刷新后出现404错误是一个常见的问题。这个问题的根本原因在于服务器的配置。在history模式下，Vue-router会使用HTML5的history.pushState API来管理路由。这种模式下，URL看起来更像传统的静态页面URL（例如：/about/team），而不是带有#符号的URL（例如：/#/about/team）。然而，当你在二级页面（例如：/about/team）刷新时，浏览器会向服务器请求该路径的资源。如果服务器没有相应的配置来处理这个请求，它会返回404错误。解决这个问题的方法是配置服务器，使其在接收到未匹配的路由请求时，返回index.html文件。这样，Vue.js的客户端路由可以接管并处理该请求。以下是一些常见服务器的配置文件示例： ### Nginx ```nginx server { listen 80; server_name your_domain.com; root /path/to/your/vue/app; location / { try_files $uri $uri/ /index.html; } } ``` ### Apache 在Apache服务器中，你可以在项目的根目录下创建一个.htaccess文件，并添加以下内容： ```apache <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] </IfModule> ``` ### Express (Node.js) 如果你使用的是Express服务器，可以在服务器端添加以下中间件： ```javascript const express = require('express'); const path = require('path'); const app = express(); app.use(express.static(path.join(__dirname, 'dist'))); app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'dist', 'index.html')); }); app.listen(8080, () => { console.log('Server is running on port 8080'); }); ``` 通过这些配置，当用户刷新二级页面时，服务器会返回index.html文件，Vue-router会正确处理路由，从而避免404错误。