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实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
js原生appendChild的bug解决心得分享
Jul 01 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
Jun 20 Javascript
JavaScript变量的作用域全解析
Aug 14 Javascript
javascript实现列表切换效果
May 02 Javascript
javascript类型系统_正则表达式RegExp类型详解
Jun 24 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 Javascript
JS正则子匹配实例分析
Dec 22 Javascript
jquery dataTable 获取某行数据
May 05 jQuery
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 Javascript
vue - props 声明数组和对象操作
Jul 30 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
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
PHP基于session.upload_progress 实现文件上传进度显示功能详解
2019/08/09 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
改进:论坛UBB代码自动插入方式
2006/12/22 Javascript
javascript jQuery插件练习
2008/12/24 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
Python匿名函数及应用示例
2019/04/09 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
详解Python用三种方式统计词频的方法
2019/07/29 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
毕业生自荐材料范文
2014/12/30 职场文书
死亡赔偿协议书
2015/01/28 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL