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配置了参数 , 名字就是参数名 , 如果没有 , 就是方法名字 二 : 如果方法产生对象时 , 需要注入数据 , 在方法参数设置即可 , …

《深入浅出Go语言》大纲

目录 为什么选择《深入浅出Go语言》? 基础核心模块 为什么选择《深入浅出Go语言》? 🚀 全面的基础知识体系 从环境搭建开始,对Go语言核心知识点进行深入探讨,深度挖掘每个基础知识的本质,为后续深入学习…

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

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

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

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

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

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

Git 入门指南:从新手到高手的完全指南

Git是一种强大的分布式版本控制系统,广泛应用于软件开发中。它的使用不仅可以帮助开发团队更好地管理代码,还可以提高团队协作效率和代码质量。随着软件开发的不断发展,版本控制成为了程序员必备的一项技能。 Git作为最流行的分布式版本控制系…

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

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

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

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

gerrit(1) | gerrit 简介

gerrit(1) | gerrit 简介 1. 目的 之前用过 gitlab CI/CD, github actions, 以及公司的配置管理员配置的 jenkins。 github 的 MR, github 的 PR, 虽然在用, 但仅限于参与开源项目或公司内的开源项目, OEM 项目中完全没在用。 …

【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&…

Shell脚本是一种用来自动化执行一系列命令的文本文件

Shell脚本是一种用来自动化执行一系列命令的文本文件。它可以包含一系列的Shell命令和控制结构,用于实现特定的功能或任务。 以下是一些使用Shell脚本的常见情况: 自动化任务:可以使用Shell脚本编写自动化任务,例如备份文件、定时执行命令等。 系统管理:通过Shell脚本可以…

电动汽车充放电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;我们先来了 解什么是责任链模式&…

【PHP源码】2.0熊猫乐园签到,任务,玩游戏一键完成源代码

每天都要签到啥的,麻烦的很,而且有时候可能忘记,干脆封装成写出php代码,宝塔新定时任务,每天00:00自动运行✅,妥妥省心~ 2.0更新 🎉首页.竹子浇水 🎉首页.竹子种植 🎉首页.竹子收获 🎉首页.水滴领取 🎉餐厅.自动工作 🎉任务.分享完成 <?php $user…

Java split 分割字符串避坑

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

2.3学习总结

2.3 1..买卖股票的最佳时机 2..买卖股票的最佳时机II 3.最长递增子序列 4.最长连续递增的子序列 5.最长重复子数组 6.最长公共子序列 https://leetcode.cn/problems/best-time-to-buy-and-sell-stock/description/ 定义&#xff1a;dp[i][0] 表示第i天持有股票所得现⾦。dp[…

点击按钮打开自定义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…