vueRouter history模式下 nginx配置
对于VUE的router[mode: history]模式(这里主要是为了去除链接上的"#")
开发的时候,一般都不出问题。是因为开发时用的服务器为node,Dev环境中已配置好了,
nginx运行的时首页没有问题,链接也没有问题,但在点击刷新后,页面就会显示(404)
原配置:
location / {
root /home/testhadoop/www/html;
index index.html index.htm;
}
解决方案如下:
方案一:
使用try_files
语法:try_files file1 [file2 ... filen] fallback
location / {
root /home/testhadoop/www/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
方案二:
使用try_files
location /{
root /home/testhadoop/www/html;
index index.html index.htm;
if (!-e $request_filename) {
rewrite ^/(.*) /index.html last;
break;
}
}
方案三:
使用error_page (一般不建议用, 404的方式会被第三方劫持)
location /{
root /home/testhadoop/www/html;
index index.html index.htm;
error_page 404 /index.html;
}
原文:https://www.jianshu.com/p/f7a19f1bafa0
vueRouter history模式下 nginx配置的更多相关文章
- 解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题
一. 异常描述: 本来使用的是vue-router的hash模式,但是hash模式下url需要带“#”符号,不仅看起来不舒服,而且有些场景下是会破坏路由中的"#"(微信分享页面就会 ...
- Windows下Nginx配置SSL实现Https访问(包含证书生成)
Vincent.李 Windows下Nginx配置SSL实现Https访问(包含证书生成) Windows下Nginx配置SSL实现Https访问(包含证书生成) 首先要说明为什么要实现https ...
- react history模式下的白屏问题
近期,再用react的时候,由于不想用丑陋的hash,便将路由模式切换成history了,结果带来了一些问题,比如刷新白屏,还有图片加载不出来,这里我们说一下解决方案. 原因 首先,我们说一下造成这一 ...
- 【转】Linux下nginx配置https协议访问的方法
一.配置nginx支持https协议访问,需要在编译安装nginx的时候添加相应的模块--with-http_ssl_module 查看nginx编译参数:/usr/local/nginx/sbin/ ...
- “Options模式”下的配置是如何绑定为Options对象
“Options模式”下的配置是如何绑定为Options对象 配置的原子结构就是单纯的键值对,并且键和值都是字符串,但是在真正的项目开发中我们一般不会单纯地以键值对的形式来使用配置.值得推荐的做法就是 ...
- Azure ARM模式下VNet配置中需要注意的几点事项
虚拟网络的配置是所有公有云中非常重要的环节.把虚拟网络配置好,对整个系统的管理.维护,以及安全性都非常重要. 本文将介绍Azure在ARM模式下VNet配置中需要特别注意的几点. 一 Azure的VN ...
- Vmware在NAT模式下网络配置详解
Vmware在NAT模式下网络配置详解 Linux中的网络配置对于接触Linux不久的小白菜来说,还是小有难度的,可能是不熟悉这种与windows系列迥然不同的命令行操作,也可能是由于对Linux的结 ...
- windwos下nginx 配置https并http强制跳转https
windwos下nginx 配置https并http强制跳转https 一.首先配置证书文件 申请证书文件,这里就不做详细过程了,直接看证书文件结果. 这是两个证书的关键文件 打开ngxin下con ...
- `vue-router`的`History`模式下的项目发布
背景 脚手架版本号:vue cli 3.x 项目路由:vue-router的History模式 原理:url路由处理逻辑从后端转移到前端. 参考:https://developer.mozilla.o ...
随机推荐
- [CF1051F]The Shortest Statement_堆优化dij_最短路树_倍增lca
The Shortest Statement 题目链接:https://codeforces.com/contest/1051/problem/F 数据范围:略. 题解: 关于这个题,有一个重要的性质 ...
- MacOs 10.14.3 Matlab2018b 解决“找不到已安装的编译器 'Xcode Clang++'。错误使用mex,未找到合适的编译器”问题
这是目前网上state of the art 的解决方案: 最开始用的是matlab2017,结果爆了这么一个问题“找不到已安装的编译器 'Xcode Clang++'.错误使用mex,未找到合适的编 ...
- LeetCode 581. 最短无序连续子数组(Shortest Unsorted Continuous Subarray)
581. 最短无序连续子数组 581. Shortest Unsorted Continuous Subarray 题目描述 给定一个整型数组,你需要寻找一个连续的子数组,如果对这个子数组进行升序排序 ...
- [转帖]LINUX下使用rinetd端口转发
LINUX下使用rinetd端口转发 https://www.iteye.com/blog/lvinie-1167701 . 本来想自己写一下 发现没必要. 并且原作者提供了pan.baidu.com ...
- JDBC预编译statement(preparedstatement)和statement的比较、execute与executeUpdate的区别
和 Statement一样,PreparedStatement也是用来执行sql语句的与创建Statement不同的是,需要根据sql语句创建PreparedStatement除此之外,还能够通过设置 ...
- 用selenium控制已打开的浏览器
在使用selenium进行自动化测试会遇到,手工打开浏览器,做了一部分操作后,并打开相关页面后再执行相关的自动化脚本. 如何使用selenium来接管先前已打开的浏览器呢?醍提出一个Google Ch ...
- go语言实现单链表
线性表包含两种存储方法:顺序存储结构和链式存储结构,其中顺序表的缺点是不便插入与删除数据. 单链表:每个结点包含两部分:数据域+指针域,上一个结点的指针指向下一结点,依次相连,形成链表.特别注意的是每 ...
- Java同C#的语法不同之处
Java同C#的语法不同之处... [注:转载而来但原出处不详:若是您原创请联系我]1,命名空间与包 C#为了把实现相似功能的类组织在一起,引入了命名空间的概念(namespace) Java中与此对 ...
- SpinWait 第二篇
SpinWait 提供了两个方法和两个只读属性. 方法: SpinWait.Reset() : 重置自旋计数器,将计数器置 0.效果就好像没调用过SpinOnce一样.SpinWait.Once() ...
- Spring Cloud Alibaba学习笔记(4) - Feign配置与使用
什么是Feign Feign是一个声明式Web Service客户端. 使用Feign能让编写Web Service客户端更加简单, 它的使用方法是定义一个接口,然后在上面添加注解,同时也支持JAX- ...