起因,多入口vue项目,主页跳转后404.项目结构编译后,有两个或者多个html文件,并且使用nginx布置项目时,可以参考这篇文章。同时去了解以下history模式和local的区别,然后注意你的访问地址。
探讨过程:
编译后的文件目录,有两个html,也就是说这个项目是两个入口
项目布置好后,配置如下
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 是 WordPress 的安装目录)的文件,就直接把这个文件的内容发送给用户。
如果不存在名为 叫 example 的文件。然后就看 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入口地址: