现象:

在浏览器中直接访问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. MongoDB- 简单操作命令

    MongoDB是基于集合操作的数据库 1.进入与退出 mongo / exit 2.库操作 显示所有库: show dbs; 查看当前所在库: db; 切换&使用某个库: use db_nam ...

  2. 基于android的天气预报的设计与实现

    目录 应用开发技术及开发平台介绍 应用需求分析 应用功能设计及其描述 应用UI展示 ①开发技术: 本系统是采用面向对象的软件开发方法,基于Android studio开发平台,以Android作为本系 ...

  3. Python基础之注释,算数运算符,变量,输入和格式化输出

    Python的注释 注释的作用:用自己熟悉的语言,对某些代码进行标注说明,增强程序的可读性: 在python解释器解释代码的过程中,凡是#右边的,解释器都直接跳过这一行: 注释的分类 单行注释 # 这 ...

  4. Redis和MongoDB的区别(面试受用)

    项目中用的是MongoDB,但是为什么用其实当时选型的时候也没有太多考虑,只是认为数据量比较大,所以采用MongoDB. 最近又想起为什么用MongoDB,就查阅一下,汇总汇总: 之前也用过redis ...

  5. C/C++中容器vector用法

    C++中数组非常坑,有没有相似Python中list的数据类型呢?相似的就是vector!vector 是同一种类型的对象的集合,每一个对象都有一个对应的整数索引值. 和 string 对象一样.标准 ...

  6. 深入学习:Windows下Git新手教程(上)

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/huangyabin001/article/details/35557231 一,安装Git: 1.1 ...

  7. ztree 获取子节点所有父节点的name的拼接

    ztree 获取子节点所有父节点的name的拼接 //获取子节点,所有父节点的name的拼接字符串function getFilePath(treeObj){if(treeObj==null)retu ...

  8. Data Protection - how to manage expired key?(转载)

    问 According to ASP.NET Key Management: Deleting a key is truly destructive behavior, and consequentl ...

  9. 基于 docker 的yapi(快速部署)

    1.使用官方的mongodb镜像 docker run --network yapi_net --ip 172.30.0.10  -d --name yapi_mongodb --restart al ...

  10. JS中事件绑定函数,事件捕获,事件冒泡

    1 事件绑定:事件与函数绑定以及怎么取消绑定 1.1 元素.onclick这种形式,如下: <div id="div1">aaa</div> <scr ...