nginx配置vue项目部署访问无问题,刷新出现404问题
现象:
在浏览器中直接访问www.test.com/api1/login会404。但如果你先访问www.test.com后再点“登录" 跳转到www.test.com/api1/login是正常显示。f5刷新又会出现 404了
这是web单页面开发模式造成的。现在主流的前端框架基本都是单页面的。如:react、vue等。
单页面简单来说就是访问所有资源路径、其实页面内容只有一个(一般是index.html)。这个页面中引入的js框架会根据当前访问的url去路由到相应的子页面组件(可以理解为页面片段)进行逻辑处理和页面渲染。
所以当你访问www.test.com/api1/login 其实web站中并没login这个页面资源。所以就报404啦!
解决:
location /demo/ {
rewrite .* /index.html break;
root /data/build;
}
参考:http://www.fly63.com/article/detial/821
nginx配置vue项目部署访问无问题,刷新出现404问题的更多相关文章
- 阿里云安装Nginx+vue项目部署
阿里云安装Nginx+vue项目部署 nginx安装包下载 http://nginx.org/en/download.html nginx安装 首先先安装PCRE pcre-devel 和Zlib,因 ...
- Vue项目部署问题及解决方案
Vue项目部署问题及解决方案 Vue-Router 有两种模式,默认是 hash 模式,另外一种是 history 模式. hash:也就是地址栏里的 # 符号.比如 http://www.examp ...
- nginx代理vue项目
很多项目的前端都使用vue编写的,在项目上线部署的时候,有些项目要求把前端页面和后台服务部署在不同的服务器,这就要求使用nginx代理,本文就来讲讲vue项目怎么使用nginx代理. 项目github ...
- django项目、vue项目部署云服务器
目录 上线架构图 服务器购买与远程连接 安装git 安装mysql 安装redis(源码安装) 安装python3.8(源码安装) 安装uwsgi 安装虚拟环境 安装nginx(源码安装) vue项目 ...
- node vue 项目部署问题汇总
场景:vue-router为history模式,不带项目名访问的部署,如果资源是用相对路径加载,则资源匹配路径不对 一.带项目名称访问,如部署到tomcat服务上 webpack: build/ut ...
- vue 项目部署
vue项目部署到PHP项目 入口目录 vue项目打包后, 是一个单文件html 我们只需要把打包后的文件夹放在php项目的public下面 访问 xxx.com/h5/index.html 就可以访问 ...
- Apache Tomcat下载、安装、环境变量配置以及项目部署
前言 针对在本地访问文件或资源出现的跨域问题,可以通过搭建本地服务器来解决,本篇随笔主要介绍通过搭建Apache Tomcat服务器来解决跨域.包括Apache Tomcat的下载.安装.环境变量的配 ...
- Windows下Nginx配置SSL实现Https访问(包含证书生成)
Vincent.李 Windows下Nginx配置SSL实现Https访问(包含证书生成) Windows下Nginx配置SSL实现Https访问(包含证书生成) 首先要说明为什么要实现https ...
- linux nginx配置新项目加域名(设置绑定域名)
转自:linux nginx配置新项目加域名 找到nginx的配置文件 nginx/nginx.conf 第一种方,法直接在nginx.com里面配置 user www www; worker_pro ...
随机推荐
- 用 Python 描述 Cookie 和 Session
这篇文章我们来聊聊Cookie和Session,网上有很多关于这两个知识点的描述,可惜的是大部分都没有示例代码,因此本文的重点在于示例代码. 环境 Python3.6.0 Bottle0.12.15 ...
- sqlserver简便创建用户并授权
很多研发人员程序连接SQL Server直接用的就是SA帐号.如果对数据库管理稍微严格一点的话,就不应该给应用程序这种权限,通常应用程序只需要进行增删改查,而很少有DDL操作,因此配置帐号时应该遵循“ ...
- MySQL replace into (insert into 的增强版)
在使用SQL语句进行数据表插入insert操作时,如果表中定义了主键,插入具有相同主键的记录会报错: Error Code: 1062. Duplicate entry 'XXXXX' for ke ...
- Binwalk的安装和使用
Binwalk的安装和使用 一.安装Git 参考链接:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067 ...
- 有关CSS的overflow和border-radius的那些事,你的圆角被覆盖了吗?
事件起因 最初是网友的一个提问,来自于我的知识星球社区: 说实话,不得不佩服这个网友的眼力,这么小的细节都能发现.不过这也正是 FineUI 一直前进的动力,来自社区的监督和促进. 从截图上看,貌似圆 ...
- git客户端的安装及使用
1.git提交全部文件的基本步骤: 1)git status:查看修改内容 2)git add XX :添加XX文件到暂存区,如果修改内容比较多,可以使用git add -A .来一次性添加所有文件( ...
- C#类继承中构造函数的执行序列
不知道大家在使用继承的过程中有木有遇到过调用构造函数时没有按照我们预期的那样执行呢?一般情况下,出现这样的问题往往是因为类继承结构中的某个基类没有被正确实例化,或者没有正确给基类构造函数提供信息,如果 ...
- BSScrollViewEdgePop
https://blog.csdn.net/qq_17190231/article/details/84201956 2018年11月18日 16:52:39 FreeBaiShun 阅读数:66 标 ...
- linux系统docker版本升级或安装
如果存在旧版本,则先卸载 最好先将镜像导出保存,以免升级后丢失或者无法使用 如有正在运行的容器,先停止 $ docker ps -q | xargs docker stop 关闭docker服务 $ ...
- 使用eclipse启动tomcat里的项目时报错:java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener
1.这种错:java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener刚开始看的时候 ...