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 相关文章推荐
利用jQuery的$.event.fix函数统一浏览器event事件处理
Dec 21 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
Nov 20 Javascript
jQuery中(function($){})(jQuery)详解
Jul 15 Javascript
JavaScript File API实现文件上传预览
Feb 02 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
一道面试题引发的对javascript类型转换的思考
Mar 06 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
Jul 28 Javascript
element ui里dialog关闭后清除验证条件方法
Feb 26 Javascript
vue路由中前进后退的一些事儿
May 18 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
Sep 10 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
c#中的实现php中的preg_replace
2009/12/21 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
PHP的Yii框架中使用数据库的配置和SQL操作实例教程
2016/03/17 PHP
jQuery 使用手册(四)
2009/09/23 Javascript
网页图片延时加载的js代码
2010/04/22 Javascript
javascript preload&lazy load
2010/05/13 Javascript
解析Javascript小括号“()”的多义性
2013/12/03 Javascript
JavaScript中的Function函数
2015/08/27 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
2016/09/05 Javascript
浅析vue数据绑定
2017/01/17 Javascript
进阶之初探nodeJS
2017/01/24 NodeJs
Vue.js实现文章评论和回复评论功能
2020/05/30 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
javascript函数的节流[throttle]与防抖[debounce]
2017/11/15 Javascript
使用JS获取SessionStorage的值
2018/01/12 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
基于hashlib模块--加密(详解)
2017/06/21 Python
python多线程扫描端口(线程池)
2019/09/04 Python
jupyter 实现notebook中显示完整的行和列
2020/04/09 Python
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
银行实习生自我鉴定范文
2013/09/19 职场文书
销售经理工作职责范文
2013/12/03 职场文书
营销人才自我鉴定范文
2013/12/25 职场文书
二手书店创业计划书
2014/01/16 职场文书
2014年大学庆元旦迎新年活动方案
2014/03/09 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
搞笑的获奖感言
2014/08/16 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
2016年优秀党员教师先进事迹材料
2016/02/29 职场文书
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB