javascript - window.open打开本地nginx部署项目路由报错404？

Question

nginx 配置
server {
        listen 90;
        server_name localhost; # 服务器域名或 IP 地址
        location / {
                root   D:/nginx-1.24.0/html/dist;
                index  index.html index.htm projectb.html;
 try_files $uri $uri/ /index.html;
            }
    }

vue配置

const routes = [
  {
    path: '/',
    name: 'Index',
    component: Index,
  },
  {
     path: '/scanCodeScreen',
    name: 'scanCodeScreen',
     component: scanCodeScreen,
  },
  {
    path: '/IndexOld',
    name: 'IndexOld',
    component: IndexOld,
  },
]

const router = new VueRouter({
  mode: 'history', //去掉url中的#
  base: '/',
  routes,
})

export default router

window.open('http://localhost:90/scanCodeScreen', '_blank'); 报错404

Answer 1

改成这样 不要用磁盘路径

server {
        listen 90;
        server_name localhost; # 服务器域名或 IP 地址
        location / {
                root   html;
                index  index.html index.htm;
                try_files $uri  /dist/index.html;
            }
    }

Answer 2

nginx 如果想支持 SPA 的话需要增加 try_files 你没有，那肯定是不支持 SPA 刷新的。

try_files $uri $uri/ /xxx/index.html;

Answer 3

当你使用 Vue.js 的 history 模式，并且尝试通过 window.open 打开一个新的浏览器标签页或窗口以访问 Vue 路由（如 /scanCodeScreen），你可能会遇到 404 错误，因为 Nginx 默认配置并不理解 Vue 路由的动态特性。

在 Vue Router 的 history 模式下，所有的路由都是通过 JavaScript 动态处理的，并不会真正请求服务器上的文件。因此，当你尝试直接通过 URL 访问 /scanCodeScreen 时，Nginx 会尝试在配置的 root 目录下找到名为 scanCodeScreen 的文件或目录，但显然这是不存在的，所以返回 404 错误。

要解决这个问题，你需要配置 Nginx 以确保对前端路由的所有请求都返回 index.html 文件，这样 Vue Router 就可以接管 URL 并显示正确的页面。你可以通过修改 Nginx 的 location 块来实现这一点：

server {
    listen 90;
    server_name localhost;

    location / {
        root   D:/nginx-1.24.0/html/dist;
        try_files $uri $uri/ /index.html; # 尝试直接找到文件或目录，否则返回 index.html
        index  index.html index.htm projectb.html;
    }
}

这里的关键是 try_files $uri $uri/ /index.html; 这一行。它会首先尝试直接服务请求的文件（$uri）或目录（$uri/），如果都不存在，则回退到 index.html。这样，无论请求什么 Vue 路由，Nginx 都会返回 index.html，然后 Vue Router 会接管并显示正确的页面。

确保你的 Vue 应用已经正确部署到 D:/nginx-1.24.0/html/dist 目录下，并且所有相关的资源文件（如 JavaScript、CSS 等）都可以被正确加载。此外，检查 Nginx 配置文件后，不要忘记重新加载 Nginx 以应用更改。你可以通过运行 nginx -s reload 命令来重新加载 Nginx。