基于ZR.VUE 前端的改造,页面刷新报错
2024-09-04 07:11:53
问题描述:
前后端分离开发,分开部署. 页面刷新 直接报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
module.exports ={
devServer: {
host: '0.0.0.0',
port: 8887,
open:true,
proxy:{
}
disableHostCheck: true,
//增加如下代码
// 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
})
以上两种解决方案,亲测有效.
最新文章
- Linux Memcached安装以及PHP扩展安装
- PHP 获取当天 凌晨 时间戳常用代码
- 未能加载文件或程序集“Enyim.Caching”或它的某一个依赖项。未能验证强名称签名
- 如何利用花生壳和VisualSVN Server建立远程代码仓库
- 【转载】#303 - Accessibility of Class Members
- HLG 1400 汽车比赛
- EBS查询用户客户化的文件配置
- JavaScript使用button提交表单
- vc++笔记十一
- 步进控件——UIStepper
- 【ci框架基础】之部署百度编辑器
- SpringBoot-SpringMvc的Interceptor拦截器配置
- 【Android Developers Training】 71. 显示翻牌动画
- Jmeter之接口测试
- oninput、onchange与onpropertychange事件的区别, 与input输入框实时检测
- 【Java】Comparable和Comparator接口的区别
- OScached页面缓存的入门使用
- 遇见requestAnimationFrame
- 在ecshop中添加页面，并且实现后台管理
- Cryptography I 学习笔记 --- 信息完整性