Nginx 配置下 Vue hash 模式路由跳转错误怎么解决？

Question

Nginx 配置

location / {
    alias /data/web/sccmp/;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
}
location /inv/ {
    alias /data/web/inv/;
    index index.html index.htm;
    try_files $uri $uri/ /inv/index.html;
}

/ 为管理端 /inv/时组长端

vue路由配置为hash模式时，跳转组长端 https://xxxx.xx.cppinfo.cn/inv/#/login 时，跳转的页面实际是管理端 https://xxxx.xx.cppinfo.cn/inv/#/login 的登录页面

如果设置为history模式，可以正确跳转 但是 进入系统刷新页面后会报错
Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
先问一下这种问题出在哪里？要如何解决

Answer 1

这个问题通常是由于 alias 和 try_files 配合使用时路径解析不一致导致的。Vue使用的是hash 模式，意味着前端路由都在#后面，Nginx不会解析 #/login，只会处理/inv/这个路径。但问题出在 try_files 的最后一个参数 /inv/index.html ——这个路径是相对于root的，而不是alias的路径。

location / {
    alias /data/web/sccmp/;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
}

location /inv/ {
    alias /data/web/inv/;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
}

修改完之后重载一下nginx，这样try_files的 /index.html 会在alias指定的目录 /data/web/inv/ 中查找，而不是 /data/web/sccmp/。

• alias 会替换掉 location 中匹配的路径部分，所以 /inv/ 实际映射到 /data/web/inv/。
• try_files 的最后一个参数如果是 /inv/index.html，会被当作服务器根目录下的路径（即 /data/web/sccmp/inv/index.html），这就错了。