问题描述:
前后端分离开发,分开部署. 页面刷新 直接报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
})
以上两种解决方案,亲测有效.
