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 ...
随机推荐
- L2TP连接尝试失败,因为安全层在初始化与远程计算机的协商时遇到了一个处理错误(转)
L2TP连接尝试失败,因为安全层在初始化与远程计算机的协商时遇到了一个处理错误 错误描述:“ L2TP连接尝试失败,因为安全层在初始化与远程计算机的协商时遇到了一个处理错误” 只有这个没有错误码. ...
- [ gczdac ] HDU1000
地址:http://acm.hdu.edu.cn/showproblem.php?pid=1000 Problem Description Calculate A + B. Input Eac ...
- Python开发【框架篇】Django的Form组件
Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 小试牛刀 1.创建Form类 from dja ...
- Migrating Brokers in a Cluster
Brokers can be moved to a new host in a Kafka cluster. This might be needed in the case of catastrop ...
- Java注解原理
1. @interface不是接口是注解类,使用@interface自定义注解时,自动继承了java.lang.annotation.Annotation接口,由编译程序自动完成其他细节 2. @in ...
- Robust PCA via Outlier Pursuit
目录 引 主要结果 定理1 定理2 理论证明 构造Oracle Problem 算法 Xu H, Caramanis C, Sanghavi S, et al. Robust PCA via Outl ...
- PyCharm中Django项目主urls导入应用中views的红线问题
PyCharm中Django项目主urls导入应用中views的红线问题 使用PyCharm学习Django框架,从项目的主urls中导入app中的views的时候,导入的包中下面有红线报错,但是却能 ...
- Centos 使用yum安装MongoDB 4.0
1.配置MongoDB的yum源 创建yum源文件: #cd /etc/yum.repos.d #vim mongodb-org-4.0.repo 添加以下内容:(我们这里使用阿里云的源) [mngo ...
- React笔记:组件(3)
1. 组件定义 组件是React的核心概念,组件将应用的UI拆分成独立的.可复用的模块. 定义组件的两种方式: (1)类组件:使用ES6 class (2)函数组件:使用函数 使用class定义组件的 ...
- mysql join用法简介
为什么需要join 为什么需要join?join中文意思为连接,连接意味着关联即将一个表和多个表之间关联起来.在处理数据库表的时候,我们经常会发现,需要从多个表中获取信息,将多个表的多个字段数据组装起 ...