基于ZR.VUE 前端的改造,页面刷新报错
问题描述:
前后端分离开发,分开部署. 页面刷新 直接报404 错误的解决办法
提示: 先在 .env.development 中 配置 VUE_APP_BASE_API , 将 '/' 替换为 后端地址 'http://localhost:8888/'
如果是对应的发布的正式环境,也要修改 .env.production 的VUE_APP_BASE_API 配置.
并且在 后端 appsettings.json 的 corsUrls 节点中,配置 前端的 地址,比如 http://localhost:8887, http://localhost:* 等
解决办法1: 使用 vue history 模式(路由访问,地址栏中间 没有 #)
在 src/router/index.js 中 最末尾
增加和修改
//在 export const constantRoutes = = [{ }] 的后面 const originalPush = Router.prototype.push;
Router.prototype.push = function push(location, onResolve, onReject) {
if (onResolve || onReject)
return originalPush.call(this, location, onResolve, onReject);
return originalPush.call(this, location).catch((err) => err);
}; export default new Router({
base: process.env.VUE_APP_ROUTER_PREFIX,
mode: 'history', // 去掉url中的#
scrollBehavior: () => ({ y: 0, x: 0 }),
routes: constantRoutes
})
然后修改在 logOut的时候,退出的路由
,找到 调用 this.$store.dispatch('LogOut') 的地方
分别在 src\layout\components\Navbar.vue 和 src\utils\request.js
this.$store.dispatch('LogOut').then(() => {
const url = process.env.VUE_APP_ROUTER_PREFIX + 'index';
location.href = url
})
然后在 根目录下的 vue.config.js
// history模式下的url会请求到服务器端,但是服务器端并没有这一个资源文件,就会返回404,所以需要配置这一项
historyApiFallback: {
rewrites: [{
from: /.*/g,
to: '/index.html' //如果是其他地址,在这里修改
}]
},
解决办法2: 不使用history模式,改为使用hash模式 (地址栏中访问有#)
1.在 src/router/index.js 中 最末尾,修改
把 mode: 'history' 注释, (等价于 采用默认的 mode:hash 模式)
export default new Router({
base: process.env.VUE_APP_ROUTER_PREFIX,
//mode: 'history', // 去掉url中的#
//scrollBehavior: () => ({ y: 0, x: 0 }),
routes: constantRoutes
})
2.然后修改在 logOut的时候,退出的路由
,找到 调用 this.$store.dispatch('LogOut') 的地方
分别在 src\layout\components\Navbar.vue 和 src\utils\request.js
this.$store.dispatch('LogOut').then(() => {
const url = process.env.VUE_APP_ROUTER_PREFIX + '#/index';
location.href = url
})
以上两种解决方案,亲测有效.
基于ZR.VUE 前端的改造,页面刷新报错的更多相关文章
- Vue 部署IIS 单页面刷新报404问题
参考地址: https://blog.csdn.net/yinjing8435/article/details/71274416
- 【转】】Vue项目部署tomcat,刷新报错404解决办法
转自[https://blog.csdn.net/g631521612/article/details/82835518] 解决方式: - 在tocmat的webapps下的项目中创建WEB-INF文 ...
- vue 缓存的keepalive页面刷新数据
用到这个的业务场景是这样的: a页面点击新建列表按钮进入到新建的页面b,填写b页面并点击b页面确认添加按钮,把这些数据带到a页面,填充到列表(数组),可以添加多条, 点击这条的时候进入到编辑页面,确认 ...
- vue 在nginx下页面刷新出现404问题解决和在nginx下页面加载了js但是页面显示空白问题解决
一.vue 在nginx下页面刷新出现404 在网上翻遍了所有这样问题的解决办法,全都是一个解决办法也是正确的解决办法,(后来在vue官网上关于history方式出现404解决方法也是这样说的),只是 ...
- Vue学习笔记-vue-element-admin 按装报错再按装
一 使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7 (Windows x86- ...
- 全局解决Vue跳转相同路由导致报错的问题
大家使用Vue做开发的时候应该都遇到过这个问题,就是某个页面下调用this.$router.push(path),而path指向的页面和当前页面是同一页面时,就会发生报错,vue-router会提示你 ...
- 后台返回json字符串 页面js报错 Uncaught SyntaxError: Unexpected identifier
后台json字符串是 [{"name": "报销申请", "id": "start"}, {"name&quo ...
- 刚新建好的动态网站项目,创建jsp页面就报错
拿到刚刚可以运行的Eclipse,就马上想敲码了,但一创建项目之后再创建jsp页面就报错= =! 报错的内容大概为缺乏对应的jar包. 我们常用Tomcat为中间体,而他本身是带有开发jsp网站的对应 ...
- py+selenium 自动判断页面是否报错并显示在自动化测试报告【原创】
有需求就会去研究解决的路子. 现在需求就是,测试报告报错信息一堆,但却无法肉眼看出是什么问题,你只能知道定位不到元素或是超时,但你却不知道其实进入页面就报错了或是提交表单就报错了!也就是看到报错,需要 ...
- 刚新建好的动态网站项目,创建jsp页面就报错??
拿到刚刚可以运行的Eclipse,就马上想敲码了,但一创建项目之后再创建jsp页面就报错= =! 报错的内容大概为缺乏对应的jar包. 我们常用Tomcat为中间体,而他本身是带有开发jsp网站的对应 ...
随机推荐
- Java程序设计(五)作业
题目1:Lisa正在编写一个能够计算三科--数学.英语.程序设计基础--平均成绩(平均成绩=三科总成绩/3)和智育成绩(智育成绩=三科总成绩*0.7)的程序.由于两个成绩的获得都要先计算总成绩,因此她 ...
- ARC148游记
A - mod M 题目链接 这道题我们可以首先对于所有的数 $%2$ ,可以证明出答案最多不超过 $2$ ,此时我们就可以把问题转化为:是否存在一个数使得序列 $a$ 中所有元素减去这个数之后的最大 ...
- 驱动开发:内核中实现Dump进程转储
多数ARK反内核工具中都存在驱动级别的内存转存功能,该功能可以将应用层中运行进程的内存镜像转存到特定目录下,内存转存功能在应对加壳程序的分析尤为重要,当进程在内存中解码后,我们可以很容易的将内存镜像导 ...
- Linux 下搭建 HBase 环境
Linux 下搭建 HBase 环境 作者:Grey 原文地址: 博客园:Linux 下搭建 HBase 环境 CSDN:Linux 下搭建 HBase 环境 前置工作 首先,需要先完成 Linux ...
- CF Round #829 题解 (Div. 2)
F 没看所以摆了 . 看拜月教教主 LHQ 在群里代打恰钱 /bx 目录 A. Technical Support (*800) B. Kevin and Permutation (*800) C. ...
- 洛P8109题解
摘自本人洛谷博客,原文章地址:https://www.luogu.com.cn/blog/cjtb666anran/solution-p8109 本题原题目摘录: 本场比赛共有 \(n\) 道题,Ci ...
- Excel中的VLOOKUP函数
VLOOKUP函数是Excel中的一个纵向查找函数,功能是按列查找,最终返回该列所需查询序列所对应的值. 该函数的语法规则如下: VLOOKUP(lookup_value,table_array,co ...
- 匿名方法、Lambda表达和自定义泛型委托以及Func、Action系统泛型委托
1.匿名方法的概念:一个方法没有具体的名称,而只有关键字delegate.方法参数.方法体.这种方法是匿名方法. 匿名方法的好处:将具体方法和委托直接关联在一起,如果我们基于委托只需要一个方法的时候, ...
- Go语言基础-从菜鸟到火鸡
课程介绍: 1.概述和环境搭建 2.程序开发 3.数据类型 4. 指针 5. 标志符 6. 运算符 7. 进制介绍 8.流程控制 9.循环控制 10.break与continue 11.函数 12.g ...
- 对Java Web中WEB-INF目录的理解以及访问方法
事情发生 在上个暑假第一次写Java web大项目的时候,对于目录管理及分配没有任何经验,就想着清晰明了. 后端servlet是用maven进行构建的,所以在目录上没有碰到什么大问题. 用idea进行 ...