vue项目线上页面刷新报404 解决方法

一.修改配置文件 nginx.conf ,并重新加载或重启 

我的nginx版本是1.9.9

location / {try_files $uri $uri/ /index.html;
}

原因:

打包后的dist下只有一个 index.html 文件及一些静态资源,这个是因为Vue是单页应用(SPA),只有一个index.html作为入口文件,其它的路由都是通过JS来进行跳转

接下来看一下服务器的配置,以 nginx 为例

server {// 监听80端口listen 80;// 定义你的站点名称server_name www.mycomm.com;// 根据请求 URI 设置配置location / {// 站点根目录,这里为 vue 构建出来的 dist 目录root   /www/dist;// 站点初始页为index.html 或 index.htmindex  index.html index.htm;}
}


我们现在可以根据 nginx 配置得出,当我们在地址栏输入 website.com 时,这时会打开我们 dist 目录下的 index.html 文件,然后我们在跳转路由进入到 website.com/login

关键在这里,当我们在 website.com/login 页执行刷新操作,nginx location 是没有相关配置的,所以就会出现 404 的情况

二.扩展 加上vue项目名访问的配置

# 根目录设置为Nginx服务器上存放Vue项目文件的地方 root /usr/local/nginx-1.9.9/html;#mycrmVue为项目名location /mycrmVue/ {alias /usr/local/nginx-1.9.9/html/mycrmVue/; # 确保这是你的Vue项目文件夹在服务器上的真实路径try_files $uri $uri/ /mycrmVue/index.html;}

三.try_files $uri $uri/ /index.html;的用法解析

​
在 Nginx 配置文件中的 try_files 指令是用来按顺序检查并尝试提供请求的文件。如果列表中的文件不存在,它会顺序尝试列表中的下一个文件。如果所有指定的文件或目录都不存在,Nginx 将执行该指令行的最后一个参数。具体到这一行配置:try_files $uri $uri/ /index.html;这个 try_files 指令的作用是按照以下顺序处理对服务器的请求:如果所有这些尝试都失败了,那么会返回404错误,因为没有文件被找到,并且没有指定一个默认的错误处理页面。这种配置模式对于前端应用尤其有用,特别是当你使用了类似React,Vue,Angular之类的前端路由时,你希望用户在刷新页面或直接输入URL时,仍然能被前端路由捕获,并映射到相应的视图或组件上,这时候返回前端应用的 index.html 就显得非常必要。​

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/447719.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

异构计算关键技术之多线程技术(三)

异构计算关键技术之多线程技术(三) 一、多线程概述 1. 多线程的概念与优劣 多线程是指在程序中同时运行多个线程,每个线程都可以独立执行不同的代码段,且各个线程之间共享程序的数据空间和资源。 优劣: 优点&#…

为 Windows10 22H2 启用 Microsoft Copilot 功能

文章目录 背景启用 Copilot 步骤开启 Copilot 入口启用 Copilot 功能 系列地址 本文初发于 “偕臧的小站”,同步转载于此。 简 述: 作为 Window 10 22H2 的长期使用者,也开发了一个 OpenAI ChatGPT 的 客户端,但自己还一直没启用 微软的 Copi…

printf死翘翘

本来想把我的单片机玩一下,寄给在大学搞研究的一个朋友,但竟然挂在printf里面,大概知道是什么位置出问题,但是还想不清楚什么原因。 我先是在stc51单片机里面搞了串口,然后我想用串口重定向到printf做调试,…

ai证件照怎么做?三款神器帮你轻松搞定!

ai证件照怎么做?在数字化时代,我们的生活已经离不开各种电子证件照。无论是求职、入学还是护照办理,都需要一张标准、正式的证件照。但是,到照相馆拍摄又贵又不方便,怎么办?别担心,现在有了AI生…

【Linux】进程通信——共享内存+消息队列+信号量

欢迎来到Cefler的博客😁 🕌博客主页:折纸花满衣 🏠个人专栏:题目解析 🌎推荐文章:【LeetCode】winter vacation training 目录 👉🏻共享内存👉🏻关…

开发桌面端应用,使用electron-vite构建项目真的是一绝!

技术栈:electron v28.2.1、react v18.2.0 构建工具:electron-vite v2.0.0 项目打包:electron-builder v24.9.1 本教程为项目工程的搭建,相关技术的知识请各自学习。 Vite在当下绝对是非常卓越的前端构建工具,很多项目…

YOLOv5独家改进:上采样算子 | 超轻量高效动态上采样DySample,效果秒杀CAFFE,助力小目标检测

💡💡💡本文独家改进:一种超轻量高效动态上采样DySample, 具有更少的参数、FLOPs,效果秒杀CAFFE和YOLOv5网络中的nn.Upsample 💡💡💡在多个数据集下验证能够涨点,尤其在小目标检测领域涨点显著。 收录 YOLOv5原创自研 https://blog.csdn.net/m0_63774211/cate…

TryHackMe-File Inclusion练习

本文相关的TryHackMe实验房间链接:TryHackMe | Why Subscribe 路径遍历(目录遍历) LocationDescription/etc/issue包含要在登录提示之前打印的消息或系统标识。/etc/profile控制系统范围的默认变量,例如导出(Export)变量、文件创…

虚拟机安装archlinux

1、创建虚拟机 2、安装系统4、为了方便,修改密码并使用dos窗口连接 5、磁盘分区 由于新建虚拟机时是8G,所以只建一个分区就行 6、格式化分区并挂载 7、更新镜像 rootarchiso ~ # pacman -Sy 8、 pacstrap -i /mnt base base-devel linux linux-f…

详解WebRTC rtc::Thread实现

rtc::Thread介绍 rtc::Thread类不仅仅实现了线程这个执行器(比如posix底层调用pthread相关接口创建线程,管理线程等),还包括消息队列(message_queue)的实现,rtc::Thread启动后就作为一个永不停止的event l…

【C++游戏开发-01】推箱子

C游戏开发 文章目录 C游戏开发[TOC](文章目录) 前言一、逻辑分析1.1地图实现1.2人物的移动1.2.1小人移动1.2.2其他移动 1.3墙壁的碰撞1.4箱子的推动1.4.1什么时候推箱子1.4.2什么情况可以推箱子 1.5胜利的判断1.6卡关的处理1.7关卡的切换 二、DEMO代码2.1游戏框架2.2各功能函数…

刨析数据结构(二)

🌈个人主页:小田爱学编程 🔥 系列专栏:数据结构————"带你无脑刨析" 🏆🏆关注博主,随时获取更多关于数据结构的优质内容!🏆🏆 😀欢迎…