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

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

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文件生成页面。 Dynamic routes are ignored。检查您上载的dist文件夹-每个工作URL（对应于pages目录）应该有一个对应的路径，但是找不到用于动态路由的文件。< / p>

要解决此问题，您需要为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。因此，您的网址将是https://ip:port/entryPath/dashboard/user/123，而不是https://ip:port/entryPath#dashboard/user/123。在这种情况下，服务器始终会请求您的根SPA index.html，它将使用该路由来确定要执行的操作（因此，当您导航到该路由时，它应像现在一样执行）。如果这样做，您将只使用SPA模式，根本不需要生成任何页面。这对SEO不利，但是您将拥有可立即使用的可共享URL。

Answer 2

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

.htaccess

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

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

2 个答案: