vue-router+nginx 非根路径配置方法


Posted in Javascript onJune 30, 2018

vue-router 的默认数据hash模式-使用url的hash来模拟一个完整的URL,于是当URL改变时,页面不会重新加载。

一般情况下,我们不喜欢丑丑的hash,类似于index.html#/matchResult,可以使用路由的history模式。history模式是利用history.pushState API来实现页面跳转。

但是有个问题,在使用nginx的时候,我们需要添加一些配置。

直接配置在根路径下

直接配置在根路径下,访问的时候只用输入http://yoursite.com,在nginx的配置如下

location / {
 try_files $uri $uri/ /index.html;
}

非根路径配置

如果一个域名下有多个项目,那么使用根路径配置就不合适了,我们需要在根路径下指定一层路径,比如说

A项目

http://yoursite.com/A

B项目

http://yoursite.com/B

nginx的配置

location ^~/A {
      alias /XX/A;//此处为A的路径
      index index.html;
      try_files $uri $uri/ /A/index.html;
  }
  location ^~/B {
      alias /XX/B;//此处为B的路径
      index index.html;
      try_files $uri $uri/ /B/index.html;
  }

tip: 注意要用alias不能用root

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
利用原生JS自动生成文章标题树的实例
Aug 22 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
Dec 08 Javascript
轻松理解JavaScript闭包
Mar 14 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 Javascript
基于 D3.js 绘制动态进度条的实例详解
Feb 26 Javascript
vue v-model动态生成详解
Jun 30 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 Javascript
javascript实现点亮灯泡特效示例
Oct 15 Javascript
Vue项目中添加锁屏功能实现思路
Jun 29 #Javascript
angular6.0开发教程之如何安装angular6.0框架
Jun 29 #Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 #Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 #Javascript
jQuery实现模糊搜索功能的方法分析
Jun 29 #jQuery
微信小程序中进行地图导航功能的实现方法
Jun 29 #Javascript
Vue表单demo v-model双向绑定问题
Jun 29 #Javascript
You might like
PHP利用COM对象访问SQLServer、Access
2006/10/09 PHP
PHP数据缓存技术
2007/02/14 PHP
php删除数组中重复元素的方法
2015/12/22 PHP
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
jquery 插件实现图片延迟加载效果代码
2010/02/06 Javascript
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
WebPack基础知识详解
2017/01/16 Javascript
react.js 获取真实的DOM节点实例(必看)
2017/04/17 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
python自定义函数实现最大值的输出方法
2019/07/09 Python
python 寻找离散序列极值点的方法
2019/07/10 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
PyCharm 无法 import pandas 程序卡住的解决方式
2020/03/09 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
html5 学习简单的拾色器
2010/09/03 HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
史泰博(Staples)中国官方网站:办公用品一站式采购
2016/09/05 全球购物
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
2014年教师批评与自我批评思想汇报
2014/09/20 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
2016年社会主义核心价值观心得体会
2016/01/21 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
MySQL8.0.18配置多主一从
2021/06/21 MySQL
浅谈GO中的Channel以及死锁的造成
2022/03/18 Golang