Nuxt 应用程序在刷新动态路由时返回 404（Tomcat 服务器）

Posted 2023-02-22

【中文标题】Nuxt 应用程序在刷新动态路由时返回 404（Tomcat 服务器）

【英文标题】：Nuxt application returns 404 when dynamic routes are refreshed (Tomcat Server)

【发布时间】：2019-11-02 12:36:27

【问题描述】：

我正在执行以下操作： - 生产版本：npm run generate - 我将 dist 文件夹复制到 Tomcat Webapps 中，它工作正常 - 每当我刷新动态路由时，它都会显示 404

有效的网址：

https://ip:port/entryPath/dashboard/user

无效的网址：

https://ip:port/entryPath/dashboard/user/123
https://ip:port/entryPath/dashboard/user/123/settings
https://ip:port/entryPath/dashboard/user/123/privacy

我希望能够共享一个 URL，例如：

https://ip:port/entryPath/dashboard/user/123/activity

因此，其他用户只需单击该 URL 即可直接访问它。但无论我在哪里部署，它都会以 404 告终。

请注意： 我的意图是在 Tomcat webapps 文件夹中部署 dist 文件夹内容。

【问题讨论】：

您好，您要托管什么服务器。目前正在写一篇关于部署 nuxt 应用程序的文章。所以我应该能够提供帮助

【参考方案1】：

您应该将您的服务器设置为始终为所有不是文件的路线请求您 spa 的 index.html。

.htaccess

<ifModule mod_rewrite.c>
 RewriteEngine On
 RewriteCond %REQUEST_FILENAME !-f
 RewriteCond %REQUEST_FILENAME !-d
 RewriteRule (.*) index.html [QSA,L]
</ifModule>

【参考方案2】：

当您的应用程序作为单页应用程序 (SPA) 运行时，一切都发生在原始入口页面中 - 当您在路线之间导航时，您实际上并没有加载新页面。只要您不刷新页面，这些路由是否对应于服务器上的实际 html 文件都没有关系，因为您的 SPA 知道做什么。但是，如果您重新加载页面或从动态路由进入，如果该 URL 处没有 html 文件，则静态服务器将提供 404，因为它不知道还能做什么。

您可能已经了解所有这些，因为您正在运行generate 来构建静态页面。但是 Nuxt 的generate 命令只知道为您的pages 目录中的*.vue 文件生成页面。 Dynamic routes are ignored。检查您上传的 dist 文件夹 - 您的每个工作 URL 都应该有一个对应的路径（对应于您的 pages 目录），但您找不到动态路由的文件。

要解决这个问题，您需要为generate 命令提供一组动态路由。您可以通过将something like this 添加到nuxt.config.js 来做到这一点：

  generate: 
    // create an array of all routes for generating static pages
    // careful, this is only used by `npm run generate`. These must match SPA mode routes
    routes: function () 
      return axios.get(
        'https://jsonplaceholder.typicode.com/users'
      )
      .then((response) => 
          let users = response.data.map((user) => 
              return 
                route: '/users/' + user.id,
                payload: user
              
          );
          return ['/some-other-dynamic-route-or-array-of-routes/', ...users]
       );
     
   

Here's a nice article about static sites with Nuxt with examples

如果您在dist 目录中看到它们，您就会知道您的页面正在按预期生成。 显然，对于您的用户页面之类的东西，这种方法意味着在您构建之后创建的新用户页面在您下一次构建之前不会存在。您可以尝试使用SPA fallback 为不匹配的路由加载 SPA。

编辑：您也可以使用hash mode。因此，您的 URL 将不是 https://ip:port/entryPath/dashboard/user/123，而是 https://ip:port/entryPath#dashboard/user/123。在这种情况下，服务器总是请求您的根 SPA index.html，它将使用该路由来确定要做什么（因此当您导航到该路由时它应该像现在一样执行）。如果您这样做，您将只是使用 SPA 模式，根本不需要生成任何页面。这对 SEO 不利，但您将拥有可立即使用的可共享 URL。

【讨论】：

“编辑”部分让我免于生气 - 我相信它应该是这个答案中的第一个解决方案:)