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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

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