对于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. 开启Hadoop和Spark的学习之路

    Hadoop Hadoop是一个由Apache基金会所开发的分布式系统基础架构. 用户可以在不了解分布式底层细节的情况下,开发分布式程序.充分利用集群的威力进行高速运算和存储. Hadoop实现了一个 ...

  2. cnbolgs博客中添加Latex支持

    参考:http://www.cnblogs.com/ilogic/archive/2012/08/05/latex.html 主要是利用在线生成公式的工具:MathJax,但要在博客上获得 MathJ ...

  3. IDEA设置方法注释生成模板

    1.在项目设置里面找到Editor-Live Templates(默认设置里没有这个),然后点击右边的+号,选择Template Group,创建模板组,我这里起名叫Silentdoer: 2.选中自 ...

  4. 关于wireshark的过滤器规则学习小结

    关于wireshark的过滤器规则学习小结 [前言] 这两天一直在熟悉wireshark的过滤器语法规则,以前也接触过这个工具,但只是学校老师教的如何去选择一个接口进行抓取,以及如何去分析一个包的数据 ...

  5. Hello World详解

    Hello World 题目 [题目描述] 输出“Hello World!”(不输出“”). [输入格式] 啥都没有. [输出格式] Hello World! [数据规模] 输出就行了,管那么多干什么 ...

  6. 从零开始学Flask框架-003

    index.py from flask import Flask,render_template from flask_bootstrap import Bootstrap #初始化 app = Fl ...

  7. python基础 — CSV 数据处理

    什么是csv 逗号分隔值(Comma-Separated Values,CSV,有时也称为字符分隔值,因为分隔字符也可以不是逗号),其文件以纯文本形式存储表格数据(数字和文本) 编码: encode  ...

  8. matplotlib实例笔记

    下面的图型是在一幅画布上建立的四个球员相关数据的极坐标图 关于这个图的代码如下: #_*_coding:utf-8_*_ import numpy as np import matplotlib.py ...

  9. 用Onenote写博客日志 

    进入OneNote,选中要发布博客的分区,然后点击菜单栏中的[文件]->[发送]->[发送至博客]         这时候会启动word程序弹出下面的对话框(如果你从未设置过),点击[立即 ...

  10. truncate删除一个分区,测试全局索引是否失效

    目的,有一个清理数据的需求,需要删除历史的一个分区所有记录信息,但是存在主键global索引,如何更好的维护. 如下测试流程一 提前创建好一个已时间created 字段作为分区键的范围分区表 SQL& ...