vue项目中页面遇到404报错

简介: vue项目中页面遇到404报错

vue页面访问正常,但是一刷新就会404的问题解决办法:

1.解决方法:

vue的路由模式 mode: 'history' 修改为 mode: 'hash'模式

//router.js文件
const router = new Router({
    //mode: 'history', 
    mode: 'hash',
    routes: [
        { path: '/', redirect: '/login' },
        { path: '/login', component: Login },
    ]
})

2.解决方法:

服务器Nginx配置文件里,添加如下代码,再刷新就OK了

location / {
 try_files $uri $uri/ @router;
  index index.html;
}
 
location @router {
  rewrite ^.*$ /index.html last;
}


相关文章
|
1天前
|
资源调度 JavaScript 前端开发
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
|
1天前
|
JavaScript 前端开发
vue组件化开发流程梳理,拿来即用
vue组件化开发流程梳理,拿来即用
|
1天前
|
JavaScript Go
Vue路由跳转及路由传参
Vue路由跳转及路由传参
|
6天前
|
JavaScript
【vue】如何跳转路由到指定页面位置
【vue】如何跳转路由到指定页面位置
9 0
|
6天前
|
JSON JavaScript 前端开发
【vue】假数据的选择和使用
【vue】假数据的选择和使用
12 1
|
6天前
|
JavaScript 前端开发
【vue】iview如何把input输入框和点击输入框之后的边框去掉
【vue】iview如何把input输入框和点击输入框之后的边框去掉
12 0
|
3天前
|
JavaScript 前端开发 BI
采用前后端分离Vue,Ant-Design技术开发的(手麻系统成品源码)适用于三甲医院
开发环境 技术架构:前后端分离 开发语言:C#.net6.0 开发工具:vs2022,vscode 前端框架:Vue,Ant-Design 后端框架:百小僧开源框架 数 据 库:sqlserver2019
采用前后端分离Vue,Ant-Design技术开发的(手麻系统成品源码)适用于三甲医院
|
5天前
|
监控 JavaScript
Vue中的数据变化监控与响应——深入理解Watchers
Vue中的数据变化监控与响应——深入理解Watchers
|
5天前
|
JavaScript 安全 前端开发
Vue 项目中的权限管理:让页面也学会说“你无权访问!
Vue 项目中的权限管理:让页面也学会说“你无权访问!
15 3
|
5天前
|
JavaScript 前端开发 开发者
Vue的神奇解锁:冒险的开始
Vue的神奇解锁:冒险的开始
5 1