nginx try_files(布置vue多入口项目需要,vue编译后dist多个html访问404问题)

起因,多入口vue项目,主页跳转后404.项目结构编译后,有两个或者多个html文件,并且使用nginx布置项目时,可以参考这篇文章。同时去了解以下history模式和local的区别,然后注意你的访问地址。
探讨过程:
编译后的文件目录,有两个html,也就是说这个项目是两个入口


image.png

项目布置好后,配置如下

 listen       3001;
    37          server_name  localhost;
    38
    39          #charset koi8-r;
    40
    41          #access_log  logs/host.access.log  main;
    42
    43          location / {
    44              root   dist;
    45              index  index.html index.htm;
    46          }

访问我的项目地址http://47.24.26.195:3001,返回index页面没问题,然后,登录跳转,404了~~~~
观察URL,http://47.24.26.195:3001/manage,这个后面多了一个manage,也就是对应的manage.html,然后我手动将url地址改为http://47.24.26.195:3001/manage.html,发现这样可行。所以问题就是他访问的是一个url路由,而不是一个地址。那怎么办呢,这就引出了nginx配置中的try_file的这个指令,它可以指向一个静态资源地址,或者一个路由,详细请看下面的注解

nginx try_files 详解

try_files $uri $uri/ /wordpress/index.html?$args;”

为例,我们做如下说明:
比如主页的地址为 http://blog.csdn.net,跳转后的地址http://blog.csdn.net/example ,这时候返回404.
当用户请求 http://blog.csdn.net/example 时,这里的 $uri 就是 /example。try_files 会到硬盘里尝试找这个文件。

如果存在名为 /root/example(其中root 是 WordPress 的安装目录)的文件,就直接把这个文件的内容发送给用户。

如果不存在名为 叫 example 的文件。然后就看 uri/,增加了一个 /,也就是看有没有名为 /root/example/ 的目录。又找不到,就会 fall back 到 try_files 的最后一个选项 /index.php,发起一个内部 “子请求”,也就是相当于 nginx 发起一个 HTTP 请求到 http://blog.csdn.net/index.php。这个请求会被 location ~ .php$ { ... } catch 住,也就是进入 FastCGI 的处理程序。而具体的 URI 及参数是在 REQUEST_URI 中传递给 FastCGI 和 WordPress 程序的,因此不受 URI 变化的影响。
简单的来说,try_file就是自己定义访问的内容,指令后跟上其他路由或者静态资源地址,用空格隔开,这样就能达到访问路由时,这个路由指向静态资源地址了。

以我自己这个项目为例,有两个入口,index.html和manage.html两个入口,需要在下面添加如图所示,第一个location为默认的斜杆地址,指向index页面,第二个location /manage 指向第二个manage入口地址:


image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,530评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,403评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,120评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,770评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,758评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,649评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,021评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,675评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,931评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,751评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,410评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,004评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,969评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,042评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,493评论 2 343

推荐阅读更多精彩内容

  • 大多数 Nginx 新手都会频繁遇到这样一个困惑,那就是当同一个location配置块使用了多个 Nginx 模块...
    SkTj阅读 7,573评论 0 12
  • Nginx简介 解决基于进程模型产生的C10K问题,请求时即使无状态连接如web服务都无法达到并发响应量级一万的现...
    魏镇坪阅读 1,985评论 0 9
  • 原文出处:https://blog.csdn.net/david_xtd/article/details/1696...
    清风徐来水波不清阅读 814评论 0 0
  • 1.简介:  Nginx:engine X ,2002年,开源,商业版 http协议:web服务器(类似于ht...
    尛尛大尹阅读 1,858评论 0 3
  • 你像一位血统纯正的王子 秉承了家族 悠久的历史与文化 你出现的地方 时常有曼妙的音乐响起 芬芳的玫瑰伴随 你身份高...
    黑林鸟阅读 996评论 20 27