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

Question

我正在执行以下操作：
- 生产构建：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 结束。

请注意：
我的目的是将dist文件夹内容部署在 Tomcat webapps 文件夹上。

Answer 1

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

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

要解决此问题，您需要为命令提供一组动态路由generate。你可以通过添加像这样到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]
       });
     }
   }

这是一篇关于 Nuxt 静态站点的好文章，并附有示例

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

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

Answer 2

您应该将服务器设置为始终请求水疗中心的index.html 以获取所有非文件的路由。

.htaccess

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