对于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配置的更多相关文章

  1. 解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题

    一. 异常描述: 本来使用的是vue-router的hash模式,但是hash模式下url需要带“#”符号,不仅看起来不舒服,而且有些场景下是会破坏路由中的"#"(微信分享页面就会 ...

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

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

  3. react history模式下的白屏问题

    近期,再用react的时候,由于不想用丑陋的hash,便将路由模式切换成history了,结果带来了一些问题,比如刷新白屏,还有图片加载不出来,这里我们说一下解决方案. 原因 首先,我们说一下造成这一 ...

  4. 【转】Linux下nginx配置https协议访问的方法

    一.配置nginx支持https协议访问,需要在编译安装nginx的时候添加相应的模块--with-http_ssl_module 查看nginx编译参数:/usr/local/nginx/sbin/ ...

  5. “Options模式”下的配置是如何绑定为Options对象

    “Options模式”下的配置是如何绑定为Options对象 配置的原子结构就是单纯的键值对,并且键和值都是字符串,但是在真正的项目开发中我们一般不会单纯地以键值对的形式来使用配置.值得推荐的做法就是 ...

  6. Azure ARM模式下VNet配置中需要注意的几点事项

    虚拟网络的配置是所有公有云中非常重要的环节.把虚拟网络配置好,对整个系统的管理.维护,以及安全性都非常重要. 本文将介绍Azure在ARM模式下VNet配置中需要特别注意的几点. 一 Azure的VN ...

  7. Vmware在NAT模式下网络配置详解

    Vmware在NAT模式下网络配置详解 Linux中的网络配置对于接触Linux不久的小白菜来说,还是小有难度的,可能是不熟悉这种与windows系列迥然不同的命令行操作,也可能是由于对Linux的结 ...

  8. windwos下nginx 配置https并http强制跳转https

    windwos下nginx  配置https并http强制跳转https 一.首先配置证书文件 申请证书文件,这里就不做详细过程了,直接看证书文件结果. 这是两个证书的关键文件 打开ngxin下con ...

  9. `vue-router`的`History`模式下的项目发布

    背景 脚手架版本号:vue cli 3.x 项目路由:vue-router的History模式 原理:url路由处理逻辑从后端转移到前端. 参考:https://developer.mozilla.o ...

随机推荐

  1. 最新 中细软java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.中细软等10家互联网公司的校招Offer,因为某些自身原因最终选择了 中细软.6.7月主要是做系统复习.项目复盘.LeetC ...

  2. 走进热修复框架AndFix的世界

    关于阿里的开源热修复框架AndFix引起了广泛共鸣,受到了很多人的青睐.那今天就跟随我的步伐来详细了解一下AndFix的详细信息和使用方法.1.什么是AndFix? AndFix是阿里巴巴出的一个专门 ...

  3. RestTemplate对象的使用

  4. Python09之range函数(BIF内置函数)

    具体语法: range(起始值,结束值,步进值) range() 其属于内置函数,不需要导入其他模块即可使用,直接在Python的IDLE直接可以使用. list(range(0,10)) [0, 1 ...

  5. MySQL中的case when 中对于NULL值判断的坑

    sql中的case when 有点类似于Java中的switch语句,比较灵活,但是在Mysql中对于Null的处理有点特殊 Mysql中case when语法: 语法1: CASE case_val ...

  6. IDEA好用插件推荐

    Maven Helper:排查maven依赖冲突神器,强力推荐! Alibaba Java Coding Guidelines:阿里巴巴编程规范 CamelCase:驼峰命名工具,SHIFT + AL ...

  7. netty--buffer分配策略

    AdaptiveRecvByteBufAllocator 动态分配buffer大小的类. 如果前一次读取完全填满了分配的缓冲区,它将逐渐增加预期的可读字节数.(增加的方式:初始化类的时候,会预先设置好 ...

  8. elasticsearch 开机自启

    linux下开机自启: 在/etc/init.d目录下新建文件elasticsearch 并敲入shell脚本: #!/bin/sh #chkconfig: #description: elastic ...

  9. Java构建器(多个构造器参数)

    今天看netty权威指南,第一次听说构建器,百度了几个博客,但是并没有通俗易懂一点儿的,综合别人的博客,总结如下: 1. 构建器是什么? 当创建对象需要传入多个参数的时候我们通常会根据参数的数量写不同 ...

  10. 使用 JS 来动态操作 css ,你知道几种方法?

    JavaScript 可以说是交互之王,它作为脚本语言加上许多 Web Api 进一步扩展了它的特性集,更加丰富界面交互的可操作性.这类 API 的例子包括WebGL API.Canvas API.D ...