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

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