Vue路由history模式踩坑记录:nginx配置解决404问题
问题背景:
vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载。但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使用路由的history的模式。比如如下网址:使用hash模式的话,那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问,如果路由使用 history的话,那么访问的路径变成 如下:http://localhost:8080/bank/page/count 这样的了;
不过history的这种模式需要后台配置支持。比如:当我们进行项目的主页的时候,一切正常,可以访问,但是当我们刷新页面或者直接访问路径的时候就会返回404,那是因为在history模式下,只是动态的通过js操作window.history来改变浏览器地址栏里的路径,并没有发起http请求,但是当我直接在浏览器里输入这个地址的时候,就一定要对服务器发起http请求,但是这个目标在服务器上又不存在,所以会返回404
怎么解决呢?我们现在可以把所有请求都转发到 http://localhost:8080/bank/page/index.html上就可以了。
解决方案:
对于VUE的router[mode: history]模式在开发的时候,一般都不出问题。是因为开发时用的服务器为node,Dev环境中自然已配置好了。
但对于放到nginx下运行的时候,自然还会有其他注意的地方。总结如下:
在nginx里配置了以下配置后, 可能首页没有问题,但链接其他会出现(404)
- location / {
- root D:\Test\exprice\dist;
- index index.html index.htm;
- try_files $uri $uri/ /index.html;
- add_header 'Access-Control-Allow-Origin' '*';
- add_header 'Access-Control-Allow-Credentials' 'true';
- add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
- add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
- }
- location ^~/api/ {
- proxy_pass http://39.105.109.245:8080/;
- }
为了解决404,需要通过以下两种方式:
1、官网推荐
- location / {
- root D:\Test\exprice\dist;
- index index.html index.htm;
- try_files $uri $uri/ /index.html;
2、匹配errpr_page
- location /{
- root /data/nginx/html;
- index index.html index.htm;
- error_page /index.html;
- }
Vue路由history模式踩坑记录:nginx配置解决404问题的更多相关文章
- K8s nginx-ingress 如何配置二级目录转发远程静态服务器基于Vue路由history模式打包的应用程序
背景 首先这标题有点绕,我先解释下: 首先我们有静态服务器,上面某个目录有Vue路由history模式打包的应用程序(也就是build后的产物): 但是静态服务器一般不做对外域名用的,我们需要在k8s ...
- VUE路由history模式坑记--NGINX
因微信分享和自动登录需要,对于URL中存在'#'的地址,处理起来比较坑(需要手动写一些代码来处理).还有可能会有一些隐藏的问题没被发现. 如果VUE能像其他(JSP/PHP)系统的路径一样,就不存在这 ...
- vue路由history模式,nginx配置
nginx配置内容 # For more information on configuration, see: # * Official English Documentation: http://n ...
- vue路由history模式刷新页面出现404问题
vue hash模式下,URL中存在'#',用'history'模式就能解决这个问题.但是history模式会出现刷新页面后,页面出现404.解决的办法是用nginx配置一下.在nginx的配置文件中 ...
- 新来的前端小姐姐问:Vue路由history模式刷新页面出现404问题
摘要:vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 本文分享自华为云社区<学习Vue Rou ...
- vue路由history模式下打包node服务器配置
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...
- vue路由history模式刷新404问题解决方案
更改router 的base // biz是二级目录,路由文件改成 const router = new VueRouter({ mode: 'history', // base: process.e ...
- 解决vue路由history模式刷新后404的问题
server { listen ;#默认端口是80,如果端口没被占用可以不用修改 server_name localhost; root E:/vue/my_project/dist;#vue项目的打 ...
- nginx----------前端写了一套带有vue路由的的功能。放到nginx配置的目录下以后,刷新会报404未找到。
1. 这是根据实际情况来写的. location /h5/activity/wechat/ { index index.html index.htm index.php; ...
随机推荐
- OptParse选项工具模块
OptParse是一个从Python2.3版本起引入的一个编写命令行工具模块,示例如下 ######example.py###### import optparse if __name__ == &q ...
- 理解URI
---恢复内容开始--- 参考 https://zh.wikipedia.org/wiki/%E7%BB%9F%E4%B8%80%E8%B5%84%E6%BA%90%E6%A0%87%E5%BF%97 ...
- python 对字典"排序"
对字典进行排序?这其实是一个伪命题,搞清楚python字典的定义---字典本身默认以key的字符顺序输出显示---就像我们用的真实的字典一样,按照abcd字母的顺序排列,并且本质上各自没有先后关系,是 ...
- python的可变与不可变数据类型
<python的可变与不可变数据类型> python与C/C++不一样,它的变量使用有自己的特点,当初学python的时候,一定要记住“一切皆为对象,一切皆为对象的引用”这句话,其 ...
- Redis 连接命令
1.AUTH password 验证密码是否正确 2.ECHO message 打印字符串 3.PING 查看服务是否运行 4.QUIT 关闭当前连接 5.SELECT index 切换到指定的数据库
- [LOJ#2980][THUSCH2017]大魔法师(线段树+矩阵)
每个线段树维护一个行向量[A,B,C,len]分别是这个区间的A,B,C区间和与区间长度,转移显然. 以及此题卡常,稍微哪里写丑了就能100->45. #include<cstdio> ...
- nginx安装第三方模块
原已经安装好的nginx,现在需要添加一个未被编译安装的模块 举例说明:安装第三方的ngx_cache_purge模块(用于清除指定URL的缓存) nginx的模块是需要重新编译nginx,而不是像a ...
- Git 初学者使用指南及Git 资源整理
Git 资源整理 Git is a free and open source distributed version control system designed to handle everyth ...
- NOIP 算法模板
Hash: #include <iostream> #include <cstdio> #include <cstdlib> #include <algori ...
- MyTalkStuffHomeIcon-2
圆形.高清头像素材专用-2