本文作者:问几许

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

问几许 4年前 ( 2018-12-05 ) 1658 抢沙发
vue-router+nginx 非根路径配置方法摘要: vue-router 的默认数据hash模式-使用url的hash来模拟一个完整的URL,于是当URL改变时,页面不会重新加载。一般情况下,我们不喜欢丑丑的hash,类似于inde...


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


文章版权及转载声明

作者:问几许本文地址:https://wenjixu.com/blog/48.html发布于 4年前 ( 2018-12-05 )
文章转载或复制请以超链接形式并注明出处问几许

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论

快捷回复:

评论列表 (暂无评论,1658人围观)参与讨论

还没有评论,来说两句吧...