nginx部署前端项目后刷新浏览器报错404

问题: Vue项目打包部署Nginx服务器后,刷新页面后出现404的问题。

原因: 加载单页应用后路由改变均由浏览器处理,而刷新时将会请求当前的链接,而Nginx无法找到对应的页面。

解决:在Nginx配置文件nginx.conf中加入如下配置: 

try_files $uri $uri/ /index.html;

# 变量解释
try_files  固定语法
$uri       指代home文件(ip地址后面的路径,假如是127.0.0.1/index/a.png,那就指代index/a.png)
$uri/      指代home文件夹
/index.html  向ip/index.html 地址发起请求
 
try_files $uri $uri/ /index.html;
尝试解析下列2个文件/文件夹(自动分辨出,IP后面的路径是文件还是文件夹), $uri/$uri/,
如果解析到,返回第一个,
如果都没有解析到,向127.0.0.1/index.html发起请求跳转(该路由必须真实,不然会报错)


#user  nobody;
worker_processes  1;#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;#pid        logs/nginx.pid;events {worker_connections  1024;
}http {include       mime.types;default_type  application/octet-stream;#log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '#                  '$status $body_bytes_sent "$http_referer" '#                  '"$http_user_agent" "$http_x_forwarded_for"';#access_log  logs/access.log  main;sendfile        on;#tcp_nopush     on;#keepalive_timeout  0;keepalive_timeout  65;#gzip  on;server {listen       8100;server_name  localhost;charset utf-8;location / {root   D:/deploy/web/http;index  index.html index.htm;}}   server {listen       80;server_name  localhost;charset utf-8;location / {root   D:/deploy/gn/http;index  index.html index.htm;try_files $uri $uri/ /index.html;}}  }

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

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

相关文章

基于JAVA springboot+VUE前后端分离疫情防疫平台设计实现

🍅 作者主页:Java李杨勇 🍅 简介:Java领域优质创作者🏆、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我,都给你】 🍅 欢迎点赞 👍 收藏 ⭐留言 &#x1f…

基于java ssm springboot+mybatis酒庄内部管理系统设计和实现

🍅 作者主页:Java李杨勇 🍅 简介:Java领域优质创作者🏆、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我,都给你】 🍅 欢迎点赞 👍 收藏 ⭐留言 &#x1f…

java springboot+mybatis电影售票网站管理系统前台+后台设计和实现

🍅 作者主页:Java李杨勇 🍅 简介:Java领域优质创作者🏆、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我,都给你】 🍅 欢迎点赞 👍 收藏 ⭐留言 &#x1f…

基于java ssm springboot+VUE疫情防疫系统系统前后端分离设计和实现

🍅 作者主页:Java李杨勇 🍅 简介:Java领域优质创作者🏆、Java李阳勇 公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我,都给你】 🍅 欢迎点赞 👍 收藏 ⭐留言 &#x1…

基于java ssm springboot选课推荐交流平台系统设计和实现

🍅 作者主页:Java李杨勇 🍅 简介:Java领域优质创作者🏆、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我,都给你】 🍅 欢迎点赞 👍 收藏 ⭐留言 &#x1f…

基于java eclipse+jsp+mysql+servlet+Spring的学生信息管理系统基础版

🍅 作者主页:Java李杨勇 🍅 简介:Java领域优质创作者🏆、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我,都给你】 🍅 欢迎点赞 👍 收藏 ⭐留言 &#x1f…

IDEA(2021)最全常用快捷键《必须收藏》

目录 前言: 新手必须掌握: Ctrl: Alt: Shift: Ctrl Alt: Ctrl Shift: Alt Shift: Ctrl Shift Alt: 其他: 前言: IDEA对新手来说…

大学生一个暑假学会5个神仙赚钱技能 | 你学会了几个?记得收藏哟

非常建议我的大学生粉丝以及朋友在这个炎热的夏天暑假拿出一部分来学会或提升这5个神仙技能、尤其是当你对你的大学专业不满意的时候,但不仅能帮你的大学不知识更加优秀,还可以让你的毕业后都有赚钱的第二副业技能、记得必须选一个学会哟、目前我自己除了…

毕设/私活/必备,一个挣钱的标准开源前后端分离【springboot+vue+redis+Spring Security】脚手架--若依框架

前言: 今天和大家分享一个是一个开源接私活/毕设/兼职挣钱的java前后端分离的开源项目,用了一小时左右把源码下载跑了一下、感觉还不错,中间运行前端代码的时候遇到一些小问题、根据错误提示也很快解决了、这是个什么项目呢,它是集…

【升职加薪必备架构图】Springboot学习路线汇总

前言: 在以前传统Spring去做Java开发中,大量 XML文件存在项目中,导致项目变得笨重繁琐、开发和部署效率也降低。前几年推出的SpringBoot 提升了Spring 开发者体验。集成了大量常用第三方库配置、零配置开箱即用、让大家更加专注于业务逻辑。同…

基于java实现学科竞赛管理系统【Springboot+mybatis+layui】

🍅 作者主页:Java李杨勇 🍅 简介:Java领域优质创作者🏆、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 临近学期结束&#xff…

基于JavaSpringMvc+mybatis实现学生信息管理系统

🍅 作者主页:Java李杨勇 🍅 简介:Java领域优质创作者🏆、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 临近学期结束&#xff…

【CSDN】-长沙1024程序员节技术英雄会之行

前言: 最开始初识CSDN和大多数人一样、程序员有Bug的时候大多数是通过百度SEO搜索、第一眼就看见了CSDN、建立了和CSDN的第一次联系、加强我和CSDN关系的是在今年初的时候无意中发表了一篇文章、居然上综合热榜、后面的新星计划,然后慢慢开始关注CSDN、其…

还在手写数据库设计文档?java一键生成

🍅 作者主页:Java李杨勇 🍅 简介:Java领域优质创作者🏆、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 前言: 以前…

一个基于SpringBoot+vue的学生信息管理系统详细设计

🍅 作者主页:Java李杨勇 🍅 简介:Java领域优质创作者🏆、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 前言介绍: …

基于java Springboot+Vue+shiro前后端分离疫情防疫管理系统设计和实现2.0

目录 研究背景 主要特性功能: 视频效果演示 : 主要功能截图: 系统首页: 疫情数据分布图模拟: 用户管理: 角色控制: 菜单权限: 每日健康打卡: 历史出行数据&#xff1…

基于Java+SpringBoot+vue+node.js的图书购物商城系统详细设计和实现

🍅 作者主页:Java李杨勇 🍅 简介:Java领域优质创作者🏆、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 前言介绍: …

基于Java+SpringBoot+vue+node.js的智能农场管理系统详细设计和实现

🍅 作者主页:Java李杨勇 🍅 简介:Java领域优质创作者🏆、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 研究背景意义 中国是农…

基于java+springboot+layui的流浪动物交流信息平台设计实现

🍅 作者主页:Java李杨勇 🍅 简介:Java领域优质创作者🏆、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系和送书🍅 前言介绍&#x…

基于Java+SpringBoot+vue+node.js等疫情网课管理系统详细设计和实现

🍅 作者简介:CSDN特邀作者✌、java领域优质创作者💪 🍅关注公众号【java李杨勇】 简历模板、学习资料、面试题库等都给你 🍅文末获取源码联系🍅 目录 前言介绍: 语言技术: 功能设…