首页 > 系统相关 >vue项目部署到nginx后一刷新页面就404

vue项目部署到nginx后一刷新页面就404

时间:2024-09-26 17:35:31浏览次数:8  
标签:index vue Nginx html 404 nginx Vue 目录 路由

在Vue项目部署到Nginx服务器上时,遇到刷新页面显示404的问题,通常是因为Nginx无法正确地处理Vue路由。Vue应用的路由是前端路由,依赖于JavaScript来动态解析URL,当直接访问除根路径外的URL时,Nginx默认会尝试在服务器上找到对应的文件或目录,如果找不到就会返回404错误。

为了解决这个问题,你需要配置Nginx,使得所有请求都重定向到Vue应用的入口文件(通常是index.html),这样无论请求什么URL,Vue的路由都能正确处理。以下是一个基本的Nginx配置示例,用于解决这个问题:

以宝塔为例,新建网站后对网站编辑伪静态:

    location / {  
        root  /www/wwwroot/vue; # Vue应用打包后的文件存放的目录  
        try_files $uri $uri/ /index.html;
    } 

这里的关键是try_files指令,它按照列出的顺序检查文件是否存在,如果文件或目录不存在,则最后会返回/index.html。由于Vue应用是SPA,所有路由都应该在前端处理,因此返回index.html是合适的。

确保你的Vue应用已经通过npm run build(或类似的命令)构建完成,并且所有的构建文件(包括index.html)都已经被放置在Nginx的root指令指定的目录中。

如果你正在使用Vue CLI 3或更高版本,并且使用vue-cli-service build来构建你的项目,它默认会生成一个dist/目录,你需要确保Nginx的root指令指向这个目录(或者将其内容复制到Nginx的默认目录)。

最后,不要忘记重启Nginx服务以使配置生效。你可以使用sudo systemctl restart nginx(对于使用systemd的系统)或其他相应的命令来重启Nginx。

标签:index,vue,Nginx,html,404,nginx,Vue,目录,路由
From: https://www.cnblogs.com/cx850116/p/18433848

相关文章

  • 【笔记】微分几何(40420644)
    [40420644]微分几何(DifferentialGeometry)开课院系:数学系主讲教师:李海中课程学分:4课程学时:65上课时间:每周一15:20~16:55、每周四8:00~9:35。教材:《微分几何(第2版)》–彭家贵,陈卿(2021,高等教育出版社)。参考书:DifferentialGeometryofCurvesandSurfaces(2nde......
  • 如何用Java SpringBoot Vue搭建宠物店管理系统?实现高效业务流程
    ✍✍计算机毕业编程指导师**⭐⭐个人介绍:自己非常喜欢研究技术问题!专业做Java、Python、小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。⛽⛽实战项目:有源码或者技术上的问题欢迎在评论区一起讨论交流!⚡⚡Java、Python、小程序、大数据实战项目集⚡⚡文末获取......
  • java+vue计算机毕设本科生考勤与考核管理信息系统【源码+程序+论文+开题】
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着高校规模的不断扩大和学生人数的急剧增加,传统的人工考勤与考核方式已难以满足高效、准确的管理需求。在日常教学管理中,学生考勤、成绩管理、选课......
  • vue3对接-捷宇SDK高拍仪
    vue3对接捷宇的sdk高拍仪。一般来说拿到捷宇对接资料,拿到控件,安装到需要的机器上不同的设备型号,插件会不一样,捷宇只适合windos系统。对接资料大概这些在对应的机器上安装控件(如果控件版本较老,则只支持IE浏览器)控件无脑安装就行,控件安装完成后需要去注册表搜索......
  • java+vue计算机毕设班级管理系统【源码+程序+论文+开题】
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着教育信息化的不断深入发展,传统的班级管理模式已难以满足当前高效、精准、便捷的管理需求。传统方式下,学生信息、成绩、宿舍分配、辅导员沟通、教......
  • java+vue计算机毕设报考意向分析系统【源码+程序+论文+开题】
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着教育改革的深入和高校招生规模的不断扩大,学生报考高校及专业的选择日益成为影响个人未来发展的关键环节。然而,面对众多高校、复杂的专业设置以及......
  • 【VUE】[Violation] Added non-passive event listener to a scroll-blocking...
    1.问题[Violation]Addednon-passiveeventlistenertoascroll-blocking<某些>事件.Considermarkingeventhandleras'passive'tomakethepagemoreresponsive.See<URL>译:[违规]向滚动阻止添加了非被动事件侦听器<某些>事件.请考虑将事件处理程序标记为“被......
  • 基于django+vue智能出行系统设计与实现【开题报告+程序+论文】-计算机毕设
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着城市化进程的加速和居民生活水平的提高,交通出行已成为现代社会不可或缺的一部分。然而,传统出行方式面临着交通拥堵、资源浪费、环境污......
  • 基于django+vue在线视频网站【开题报告+程序+论文】-计算机毕设
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着互联网技术的飞速发展和宽带网络的普及,视频内容已成为人们日常生活中不可或缺的一部分。在线视频网站作为数字时代的重要产物,不仅为用......
  • 基于django+vue在线家庭语数外作业系统的设计与实现【开题报告+程序+论文】-计算机毕
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着互联网技术的飞速发展和教育信息化的不断深入,传统教育模式正逐步向更加灵活、高效的在线教育模式转变。在家庭教育中,家长往往面临辅导......