如何解决vue/react打包上线之后路由页面刷新就丢失的问题

已于 2022-04-23 18:43:04 修改
阅读量1.1k 收藏 4
点赞数 6
分类专栏： react实现的功能【记录】 vue实现的功能及遇到的问题解决【纪录】 文章标签： react
于 2021-07-26 14:58:59 首次发布
张砚博
本文链接：https://blog.csdn.net/qq_47272950/article/details/119109692
版权
当Vue或React应用打包上线后，遇到路由页面刷新导致内容丢失的问题，可以通过服务器如nginx配置URL重写，将请求重定向到应用程序入口文件index.html，以此保持SPA(single-page application)的正常运行。
摘要由CSDN通过智能技术生成 
location /{
   try_files $uri /index.html;
   index index.html index.htm index.php;
}

通过服务器的nginx配置进行url重写到程序入口index.html,代码如上请添加图片描述

码上流星&洒下星辰
关注
专栏目录
订阅专栏
react_T_v18
Pwsifeng的博客
06-16 1640
初学者
vue打包部署后，前端页面刷新后丢失
uu915349931的博客
12-08 1134
原因： 路由配置里模式不正确 找到router文件夹，里边文件中，找到 mode: 'history' 把这行注释掉
刷新页面url跳转为其他路径
最新发布
m0_63034063的博客
03-18 432
刷新页面的时候，当前的url变为其他路由，有可能是router.js的name设置成同一个。
React-Router做路由，打包出来的静态文件丢到Tomcat里路由不生效，刷新页面404两个错误
qssn的博客
02-07 5321
有些开发er可能会想把做好的react项目，打包出来的静态文件丢到tomcat上测试，然后发现自己的路由怎么不生效了？？ 页面不进行加载了。  第二个就是但是当我们刷新一下浏览器，或者打开一个不存在的页面的时候 路由不加载（都是路径惹的祸）  首先，看一下自己的本地路径是不是这个样子的： http://localhost:8888/home 然而丢到tomcat的webap
解决vue打包部署到express后刷新页面丢失的问题
qq_21522331的博客
07-23 891
1.这样出来的url会是hash形式的，不好看 2.express使用配置history中间件 要先安装require里面那个东西，cnpm i connect-history-api-fallback --save
vue打包后vue-router无内容
weixin_45042868的博客
11-17 428
在使用了createWebHistory创建路由时，发现打包后页面空白，也无报错信息。
打包部署后，页面刷新丢失的问题
weixin_48218630的博客
09-20 768
如果找不到，则寻找 $uri/ 表示该路径下的目录，如果找到目录，则再次寻找该目录下的默认文件，如果还找不到，则返回 index.html 文件，即该站点的主文件。这段代码是设置 Nginx 服务器的请求响应规则，当请求路由地址不存在时，将请求指向根目录下的 index.html 文件，同时如果请求的是目录而不是文件，则继续寻找该目录中的默认文件，并返回该文件。在使用Vue的时候，默认是使用history模式，如果使用history模式时，没有正确配置服务端，可能会出现路由跳转时丢失问题。
react笔记
m0_60525480的博客
03-09 481
1.html文件中引入库：react、react-dom、Babel <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"&gt...
React 全家桶含自定义hook的方法
小王的技术库
06-09 501
React：用于构建用户界面的 JavaScript 库。由 开发且开源。原生 JavaScript 的痛点：React 的特点：相关 JS 库： 创建虚拟 DOM 的两种方式：JS 和 JSX 使用 JS 创建虚拟 DOM 比 JSX 繁琐 JSX 可以让程序员更加简单地创建虚拟 DOM，相当于语法糖 最终 babel 会把 JSX 语法转换为 JS JS创建 JSX创建（最终babel转为js） 虚拟 DOM && 真实 DOM 关于虚拟 DOM： JSX JSX 简介 全称：JavaScri
React学习
weixin_53126517的博客
03-18 1172
文章目录一、React的简介1、介绍2、特点3、框架对比二、环境搭建1、引入文件的方式2、官方脚手架(模块化)第三方脚手架第一个React程序JSX1、JSX的介绍2、特点：3、JSX的语法**ReactDOM.render()函数**条件渲染列表渲染组件函数方式的组件ES5的写法：ES6类的写法：多个组件props外部传值：组件内部使用： 一、React的简介 1、介绍 React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI，很多人认为 React 是 MVC
react-router页面刷新之后嵌套路由找不到的坑
问白的博客
03-14 9070
刷新之后嵌套路由找不到 最近遇到一个react路由配置的一个小坑，在复杂web应用过程中坑定都是需要配置嵌套路由来实现单页应用。 但发现，在嵌套路由的某个子页面中刷新页面，会找不到和当前路由匹配的单页。 后来发现是匹配中都是严格模式匹配，导致嵌套路由匹配不上。 代码如下： &lt;Route exact path='/' component={Home} /&gt; &lt;Route exa...
React router路由之手动刷新参数丢失?
weixin_34236497的博客
10-24 2532
项目原来的配置是/project/:companyId/:projectId 这种方式跳转。 现在产品经理意思url上太多ID不好看，去掉URL上的id 所以，我现在做的是/project ‘<Link to={{ pathname : ' /sort ' , state : { companyId : ${companyId}, projectId: ${projectId}}}}&...
react路由打包后有问题
chaogaoxiaojifantong的博客
02-23 1175
首先在packjson加homePage "name": "login", "version": "0.2.0", "private": true, "homepage": "login", 注意要添加basename，打包后就不会出现跳去根路径的问题了 import { BrowserRouter as Router, Switch, Route, Redirect, } from "react-router-dom"; import Home f
react项目生产环境路由变化但是页面不更新
程序员超超的博客
07-11 896
然后根据这篇文章的提示，把history和react-router-dom卸载掉，然后重新安装react-router-dom，这里其实不需要history，所有不需要安装history。搭建完毕之后，我在开发环境是没有问题的，也就是development，但是等切换到production模式之后，路由就失效了，也就是当切换路由的时候，浏览器url的路径是变化了，但是页面没有变化。所有搭建的时候踩了很多坑，并且有的包可能会有版本冲突问题或者安装的包根本就没用到。然后重启，问题解决了。
vue 项目部署后 刷新一下 页面找不到 解决
weixin_34138255的博客
07-29 8796
1.修改配置router的参数 (效果不好) 2. (不能解决 出现403) 后端配置例子 Apache <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENA...
vue3路由切换，页面空白无内容
期待变成大神的博客
12-06 349
vue3路由切换，页面白页无内容
vue页面刷新报错Cannot GET /...，控制台报错404：GET http://localhost:8080/... 404 (Not Found)
qq_52126119的博客
11-19 3938
vue页面刷新报错Cannot GET /...，控制台报错404：GET http://localhost:8080/... 404 (Not Found)解决方法。 拓展:hash与history区别
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码上流星&洒下星辰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值