刷新动态路由时，Nuxt应用程序返回404(Tomcat服务器) [英] Nuxt application returns 404 when dynamic routes are refreshed (Tomcat Server)

问题描述

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

I'm doing the following:
- Production Build: npm run generate
- I copy the dist folder into the Tomcat Webapps, and it works fine
- Whenever I refresh a dynamic route, it shows 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

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

I want to be able to share an URL such as:

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

因此，其他用户只要单击URL，就可以直接访问它.但是无论我部署在哪里，它都以404结尾.

So other users just clicking the URL should be directly able to access it. But it just ends up with a 404, no matter where I deploy.

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

Please Note:
My intention is to deploy the dist folder contents on Tomcat webapps folder.

推荐答案

当您的应用程序作为单页应用程序(SPA)运行时，所有操作都在该原始条目页面中进行-当您实际上未加载新页面时在路线之间导航.只要您不刷新页面，这些路由是否对应于服务器上的实际html文件就无关紧要，因为您的SPA知道该怎么做.但是，如果您重新加载页面或从动态路径进入，则该URL上没有html文件，则静态服务器将提供404服务，因为它不知道该怎么做.

When your app is running as a single page app (SPA), everything is happening within that original entry page - you are not actually loading a new page when you navigate between routes. As long as you don't refresh the page, it doesn't matter whether or not those routes correspond to actual html files on the server because your SPA knows what do. However, if you reload the page or enter from a dynamic route, if there's no html file at that URL, a static server will serve a 404 because it doesn't know what else to do.

您可能已经了解了所有这些内容，因为您正在运行 generate 来构建静态页面.但是Nuxt的 generate 命令只知道为 pages 目录中的 *.vue 文件生成页面.动态路由将被忽略.检查您上传的 dist 文件夹-每个工作URL(与您的 pages 目录相对应)应有一个对应的路径，但找不到文件用于您的动态路线.

You might understand all of that already since you're running generate to build out static pages. But Nuxt's generate command only knows to generate pages for the *.vue files in your pages directory. Dynamic routes are ignored. Check your dist folder that you uploaded - there should be a corresponding path for each of your working URLs (which correspond to your pages directory), but you won't find files for your dynamic routes.

要解决此问题，您需要向 generate 命令提供动态路由数组.您可以通过在 nuxt.config.js 中添加类似来实现>:

To solve this, you need to give an array of dynamic routes to the generate command. You can do that by adding something like this to 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.

You'll know your pages are being generated as expected if you see them in your dist directory. Obviously for something like your user pages, this approach means that new users pages created after your build will not exist until your next build. You could try using the SPA fallback to load the SPA for unmatched routes.

您还可以使用哈希模式.因此，您的网址将是 https://ip:port/entryPath#dashboard/user/123 ，而不是 https://ip:port/entryPath/dashboard/user/123 >.在这种情况下，服务器始终会请求您的根SPA index.html，它将使用该路由来确定要执行的操作(因此，当您导航到该路由时，它应该像现在一样执行).如果以这种方式进行操作，则将仅使用SPA模式，根本不需要生成任何页面.这对SEO不利，但是您将拥有可立即使用的可共享URL.

You could also use hash mode. So instead of https://ip:port/entryPath/dashboard/user/123 your URL would be https://ip:port/entryPath#dashboard/user/123. In this case, the server is always requesting your root SPA index.html, which will use the route to determine what to do (so it should perform as it does now when you navigate to that route). If you do it this way, you will just be using SPA mode and don't need to generate any of your pages at all. This is not good for SEO, but you will have shareable URLs that work right away.

这篇关于刷新动态路由时，Nuxt应用程序返回404(Tomcat服务器)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！