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.mzph.cn/news/667178.shtml

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

相关文章

学习Spring的第十三天

非自定义bean注解开发 设置非自定义bean : 用bean去修饰一个方法 , 最后去返回 , spring就把返回的这个对象,放到Spring容器 一 :名字 : 如果bean配置了参数 , 名字就是参数名 , 如果没有 , 就是方法名字 二 : 如果方法产生对象时 , 需要注入数据 , 在方法参数设置即可 , …

SOME/IP SD 协议介绍(四)服务发现通信行为

服务发现通信行为 启动行为 服务发现将根据服务实例处于以下三个阶段之一: • 初始等待阶段 • 重复阶段 • 主要阶段 一旦系统启动并且用于服务实例的接口连接已建立,服务发现将进入该服务实例的初始等待阶段。 在进入初始等待阶段并在发送第一条服…

VScode+PlatformIO 物联网Iot开发平台环境搭建

1.vscode (1)安装platformIO插件 (2)新建项目或导入已有的arduino项目 Name:需要填写你项目的名称; Board:点开是一个下拉框,但是可以输入你想要的开发板,这里选择&quo…

你所不知道的关于库函数和系统调用的那些事

系统调用和库函数的区别 相信大家在面试或者刷面试题的时候经常能看到这样的问题,“简述一下系统调用和库函数的区别”。 系统调用是操作系统提供给用户的接口,能让用户空间的程序有入口访问内核。而库函数数一组标准函数,比如复合 POSIX 或…

90.网游逆向分析与插件开发-游戏窗口化助手-项目需求与需求拆解

内容参考于:易道云信息技术研究院VIP课 上一个内容:实现物品使用策略的功能-CSDN博客 项目需求: 在游戏窗口化时,可以在游戏之外弹出一个窗口,可以隐藏或者显示游戏窗口,显示游戏人物的基本状态&#xff…

LeetCode--代码详解 2.两数相加

2.两数相加 题目 难度:中等 给你两个 非空 的链表,表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的,并且每个节点只能存储 一位 数字。 请你将两个数相加,并以相同形式返回一个表示和的链表。 你可以假设除了数…

【JavaScript + CSS】随机生成十六进制颜色

效果图 实现 <template><div class"year_area"><div class"year_list"><el-row :span"24"><div :class"showAll"><el-col :span"5" v-for"(item, index) in defaulList" :key&…

电动汽车充放电V2G模型(matlab代码)

目录 1 主要内容 1.1 模型背景 1.2 目标函数 1.3 约束条件 2 部分代码 3 效果图 4 下载链接 1 主要内容 本程序主要建立电动汽车充放电V2G模型&#xff0c;采用粒子群算法&#xff0c;在保证电动汽车用户出行需求的前提下&#xff0c;为了使工作区域电动汽车尽可能多的消…

迁移学习实现图片分类任务

导入工具包 import time import osimport numpy as np from tqdm import tqdmimport torch import torchvision import torch.nn as nn import torch.nn.functional as Fimport matplotlib.pyplot as plt %matplotlib inline# 忽略烦人的红色提示 import warnings warnings.fi…

okhttp 的 拦截器

拦截器有很多作用&#xff0c;实现就是责任链模式&#xff0c;细节&#xff0c;等我有时间补上。 后面有时间更新一下。 OkHttp最核心的工作是在 getResponseWithInterceptorChain() 中进行&#xff0c;在进入这个方法分析之前&#xff0c;我们先来了 解什么是责任链模式&…

Java split 分割字符串避坑

使用split进行字符串分割时需要注意2点 1、特殊字符作为分隔符时需要使用\\进行转义(如\\ -> \\\\; | -> \\| ) 特殊字符 .$|()[{^?*\\ 例如对"|"分隔 未转义 String str "01|02|03"; String[] strArr str.split("|");System.out.…

点击按钮打开自定义iframe弹窗

1、效果 点击按钮打开弹窗&#xff1a; 打开弹窗后&#xff1a; 2、代码 <!DOCTYPE html> <html><head><title>iframe弹窗</title><style>/* 使用媒体查询来实现响应式设计 */media (min-width: 768px) {.popup {width: 80%; /* 设置…

【c/python】GtkBox

一、GtkBox及C语言示例 GtkBox是一个容器部件&#xff0c;用于在GTK&#xff08;GIMP Toolkit&#xff09;应用程序中水平或垂直地排列多个子部件。以下是一个简单的例子&#xff0c;展示了如何在一个基本的GTK应用程序中使用GtkBox来垂直排列两个按钮&#xff1a; 首先&#…

用Python Tkinter打造的精彩连连看小游戏【附源码】

文章目录 连连看小游戏&#xff1a;用Python Tkinter打造的精彩游戏体验游戏简介技术背景MainWindow类:职责:方法:Point类: 主执行部分:完整代码&#xff1a;总结&#xff1a; 连连看小游戏&#xff1a;用Python Tkinter打造的精彩游戏体验 在丰富多彩的游戏世界中&#xff0c…

左旋字符串的三种方法,并判断一个字符串是否为另外一个字符串旋转之后的字符串。(strcpy,strncat,strcmp,strstr函数的介绍)

一. 实现一个函数&#xff0c;可以左旋字符串中的k个字符。 例如&#xff1a; ABCD左旋一个字符得到BCDA ABCD左旋两个字符得到CDAB 通过分析&#xff0c;可以知道实际的旋转次数&#xff0c;其实是k%&#xff08;字符串长度&#xff09;。假设一个字…

西瓜书学习笔记——流形学习(公式推导+举例应用)

文章目录 等度量映射&#xff08;仅保留点与其邻近点的距离&#xff09;算法介绍实验分析 局部线性嵌入&#xff08;不仅保留点与其邻近点的距离还要保留邻近关系&#xff09;算法介绍实验分析 等度量映射&#xff08;仅保留点与其邻近点的距离&#xff09; 算法介绍 等度量映…

树莓派5一键安装C++版本OpenCV

安装环境 本人当前的安装环境&#xff1a; 树莓派5Raspberry Pi os (64-bit) Debian12 Bookworm 镜像下载地址 我这里是将镜像安装好后直接安装opencv&#xff0c;如果不是刚安装好的镜像需要注意是否有openCV的python之类的安装过&#xff0c;不然可能出现编译错误 一、扩展内…

SpringBoot中数据库的连接及Mybatis的配置和使用

目录 1 在pom.xml中引入相关依赖 2 对数据库进行配置 2.1 配置application.yml 2.2 idea连接数据库 (3.2.1有用到) 3 Mybatis的使用 3.1 测试文件的引入 3.2 使用 3.2.1 使用注解(有小技巧(✪ω✪)) 3.2.2 使用动态sql 1 在pom.xml中引入相关依赖 <dependencies&g…

海外多语言盲盒开发:打破语言障碍,连接全球消费者

随着全球化的加速和互联网的普及&#xff0c;语言障碍成为了影响跨国交流和商业活动的重要因素。为了满足跨国市场的需求&#xff0c;海外多语言盲盒开发成为了一个新兴的领域。本文将探讨海外多语言盲盒开发的意义、现状和未来发展。 一、海外多语言盲盒开发的意义 在全球化…

RedHat8.4安装邮件服务器

一、配置发件服务器 1.1 根据现场IP&#xff0c;配置主机名 vim /etc/hosts 192.168.8.120 mail.test.com 将主机名更改为邮件服务器域名mail.test.com 1.2 关闭防火墙&#xff0c;禁止开机启动 systemctl stop firewalld systemctl disable firewalld 1.3 关闭selinux v…