nuxt 小坑记录

nux t部署之后，测试说，menu上的菜单刷新后再次点击跳转会报错。

现象如下：

menu: page1;page2;

其中page1种一个按钮，跳转到pa ge2;

正常跳转没问题，在page1刷新页面后，点击跳转，路由会从/page1 变成/page1/page2，导致404；

于是重现bu g；

发现几个现象：

1、首次点击menu跳转地址是正确的，只有点击刷新的时候才会在末尾多一个斜杠，斜杠导致跳转的时候相对地址变成了page1/page2，无斜杠则会直接变成/page1（正确地址）

2、只在生产环境有这个问题，在本地开发没有这个问题；

3、同样的menu点击，只有部分有，部分没有。

看起来是生产环境有问题，查看ng:

  location / {
            root  /root/project/xx/front/;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

非常常见的ng，没什么问题；

查看network;发现，刷新的时候，/page1路径会返回301，然后/page1/ 路径，则成功返回200.

看来是路径被重定向了。重定向之后能返回200，说明，生产环境的目录跟本地开发环境不一样了。

查看打包后的output.

发现nuxt打包后的结果跟普通的不太一样，它是文件系统，会自动将page目录下的.vue转化成xx xx/index.html；

所以，它刷新/page1的时候发现，找不到文件，根据try_files的规则，找不到就会去找page1/目录，然后找到了，因此路由变成了page1/.

然后，还发现，有2个目录刷新的时候不会增加/，其余的会。仔细一看，那2个目录，在page下对应的文件，文件名字是大写.

---page

    --Page1.vue

    --page2.vue

那么，在访问/page1路由的时候，刷新不会变成/page1/,而访问/page2的时候刷新会变成/page2/.

聪明的你，一定知道是什么原因了：

大小写敏感与 Nginx 路径匹配的微妙交互

开发环境是mac系统，大小写不敏感，生产环境是linux系统，大小写敏感。

一、核心原因解析

1. 文件系统与路由的大小写匹配

• 场景 1：ForExample.vue 文件

  • 生产环境打包后：dist/ForExample/index.html（目录名首字母大写）。
  • 当访问 /forExample（首字母小写）时：
    • Linux 文件系统严格区分大小写，/forExample 与 ForExample 目录不匹配。
    • Nginx 的 try_files $uri $uri/ 规则中：
      • $uri（/forExample）：无对应文件；
      • $uri/（/forExample/）：无对应目录；
      • 最终返回 /index.html（前端路由接管，无重定向，URL 保持 /forExample）。

• 场景 2：forExample.vue 文件

  • 生产环境打包后：dist/forExample/index.html（目录名全小写）。
  • 当访问 /forExample（首字母小写）时：
    • Linux 文件系统匹配成功，/forExample 对应 forExample 目录。
    • Nginx 的 try_files $uri $uri/ 规则中：
      • $uri（/forExample）：无对应文件；
      • $uri/（/forExample/）：存在目录，触发自动重定向到带斜杠路径（301）

.

解决方案：

其实问题不在于这个增加的/。在于增加了/之后跳转，变成了page1/page2.查看router.因为写的是相对路径router.push('page2').直接改成绝对路径router.push('/page2')解决。