现象:

在浏览器中直接访问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问题的更多相关文章

  1. 阿里云安装Nginx+vue项目部署

    阿里云安装Nginx+vue项目部署 nginx安装包下载 http://nginx.org/en/download.html nginx安装 首先先安装PCRE pcre-devel 和Zlib,因 ...

  2. Vue项目部署问题及解决方案

    Vue项目部署问题及解决方案 Vue-Router 有两种模式,默认是 hash 模式,另外一种是 history 模式. hash:也就是地址栏里的 # 符号.比如 http://www.examp ...

  3. nginx代理vue项目

    很多项目的前端都使用vue编写的,在项目上线部署的时候,有些项目要求把前端页面和后台服务部署在不同的服务器,这就要求使用nginx代理,本文就来讲讲vue项目怎么使用nginx代理. 项目github ...

  4. django项目、vue项目部署云服务器

    目录 上线架构图 服务器购买与远程连接 安装git 安装mysql 安装redis(源码安装) 安装python3.8(源码安装) 安装uwsgi 安装虚拟环境 安装nginx(源码安装) vue项目 ...

  5. node vue 项目部署问题汇总

    场景:vue-router为history模式,不带项目名访问的部署,如果资源是用相对路径加载,则资源匹配路径不对 一.带项目名称访问,如部署到tomcat服务上 webpack:  build/ut ...

  6. vue 项目部署

    vue项目部署到PHP项目 入口目录 vue项目打包后, 是一个单文件html 我们只需要把打包后的文件夹放在php项目的public下面 访问 xxx.com/h5/index.html 就可以访问 ...

  7. Apache Tomcat下载、安装、环境变量配置以及项目部署

    前言 针对在本地访问文件或资源出现的跨域问题,可以通过搭建本地服务器来解决,本篇随笔主要介绍通过搭建Apache Tomcat服务器来解决跨域.包括Apache Tomcat的下载.安装.环境变量的配 ...

  8. Windows下Nginx配置SSL实现Https访问(包含证书生成)

    Vincent.李   Windows下Nginx配置SSL实现Https访问(包含证书生成) Windows下Nginx配置SSL实现Https访问(包含证书生成) 首先要说明为什么要实现https ...

  9. linux nginx配置新项目加域名(设置绑定域名)

    转自:linux nginx配置新项目加域名 找到nginx的配置文件 nginx/nginx.conf 第一种方,法直接在nginx.com里面配置 user www www; worker_pro ...

随机推荐

  1. deepin linux 学习笔记(二)——文本编辑器

    目录 deepin linux 学习笔记(二)--文本编辑器 前言 nano 小巧的命令行编辑器 通用 编辑 定位 排版 配置 vim 思路独特的超级编辑器 命令模式 插入模式 底线模式(末行模式) ...

  2. event 和delegate的分别

    突然想起delegate委托是支持+= 和-=操作的,然后研究一下究竟这个是怎么做到的,好模仿一下.一开始以为是+=的运算符重载,但是在类库参考中并没有这个运算符重载,只有!= 和==运算符重载.有点 ...

  3. Python第十三天 django 1.6 导入模板 定义数据模型 访问数据库 GET和POST方法 SimpleCMDB项目 urllib模块 urllib2模块 httplib模块 django和web服务器整合 wsgi模块 gunicorn模块

    Python第十三天   django 1.6   导入模板   定义数据模型   访问数据库   GET和POST方法    SimpleCMDB项目   urllib模块   urllib2模块 ...

  4. vue(3)—— vue的全局组件、局部组件

    组件 vue有局部组件和全局组件,这个组件后期用的会比较多,也是非常重要的 局部组件 template与components属性结合使用挂载 其中 Vmain.Vheader.Vleft.Vconte ...

  5. maven项目更换本地仓库

    由于电脑重装系统更换原来maven项目的本地仓库 以前的仓库位置如图 需要更换的仓库位置 更换步骤如下: 更换后:

  6. wifi扫描

    获取当前位置的wifi,信道,强度,mac #include "ESP8266WiFi.h" IPAddress apIP(192, 168, 4, 1); void setup( ...

  7. springfox-swagger之swagger-bootstrap-ui

    swagger-bootstrap-ui是国内的一个swagger开源项目,从发起到现在已经有三年了.初次体验了一下,觉得还是挺不错的,就如当初使用mybatis-plus那样,因为有了mybatis ...

  8. VC++6.0

    for 循环的小括号中 不可以定义变量 我也是醉了

  9. 单列集合类的根接口Collection

    Collection接口 Collection是所有单列集合的父接口,因此在Collection中定义了单列集合(List和Set)通用的一些方法,这些方法可用于操作所有的单列集合.JDK 不提供此接 ...

  10. Graphic

    画圆操作 package demo1; import java.awt.Graphics; import javax.swing.*; import javax.swing.JPanel; publi ...