0
点赞
收藏
分享

微信扫一扫

基于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

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
})

 

以上两种解决方案,亲测有效.

 



举报

相关推荐

0 条评论