页面重新加载后,Nuxt动态路由返回404

JavaScript Vue.js

2020-03-26

大家好,我正在使用nuxt js的项目中工作,而我只是这个框架的新手。我已将其配置为使用水疗模式,仅供参考,我没有更改或在nuxt配置中添加任何内容,只是默认设置。下面是我如何设置我的页面。

pages / users / index.vue-显示列表或用户

pages / users / _id.vue-显示特定用户

我已经使用npm run buildnpm run start命令部署了我的项目然后,将dist目录托管在Nginx服务器中。

问题是,当我使用nuxt链接导航到/ user / id时,页面正确呈现,但是当我直接访问页面URL或刷新页面时,却找不到nginx 404页面。

我已经读过有关nuxt generate来生成预渲染页面的信息,但是在处理数百条记录时使用它很好吗?

任何帮助,建议都将得到广泛应用。

谢谢

第3756篇《页面重新加载后,Nuxt动态路由返回404》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
Tom凯 2020.03.26

从一开始,您就应该了解哪些问题可以帮助您解决nuxt。

您可以创建三种类型的应用程序:

  1. 静态页面

在路由的基础上,nuxt生成html文件,这些文件是SEO友好的。例如,这适用于名片页面(主页+多个子页面)。您可以获得现成的html文件,例如index.html,contact.html等。

  1. 温泉

不需要SEO但具有动态路径和接口的应用程序。不使用服务器端渲染。某些方法不可用,但仍使用nuxt的某些优点。例如,动态路由或nuxt的配置中可用的许多选项。

  1. 普遍

使您可以享受nuxt.js的所有好处。借助专用的网站方法(fetch,asyncData,nuxtServerInit等),它允许您在服务器端准备数据以在浏览器端生成它们,从而使其对SEO友好。

因此,如果需要使用动态路由,则必须在SPA和通用模式之间进行选择。检查您应该使用哪些命令

飞云 2020.03.26

Nuxt具有静态站点生成和动态路由

使用此方法如果您不知道确切的动态路由,则不必关心动态路由的SEO。

generate config中,定义SPA后备的自定义页面:

export default {
  generate: {
    fallback: "custom_sap_fallbackpage.html"
  }
}

然后在Nginx中,为未知路由定义相同的后备页面,例如:

location / {
    try_files $uri /custom_sap_fallbackpage.html;
}

universal模式下,用于nuxt generate生成静态站点,部署dist(默认)文件夹。

If you set fallback: true, Nuxt will use 404.html as the default fallback page, unless you configure nginx to ignore its own default 404 page, nginx will still show you the default nginx 404 page. As documented in the nuxt doc, some services like Netlify will utilize this behavior for easier SPA integration. Though for nginx, I think a custom fallback page is the easiest way to do the static site and SPA mixing.

In this approach, static page will be pre-rendered, dynamic routes is treated as unknown route for nginx, which use the fallback SPA page to render.

And make sure you properly handle the real unknown route.

For a fixed set of dynamic routes

You can use function to generate the static site

SEO is a priority for the project

You must use SSR in Nuxt, which is the universal mode.

Only a SPA site

You can use spa mode and refer to the nginx setting showed here

L宝儿 2020.03.26

你完全是混血儿。首先,默认模式是通用aka ssr,而不是spa。文件

其次,运行通用模式所需的npm run start,而在spa模式下,您只需放置单个html文件,并将所有请求从nginx路由到此文件。

但是,如果您使用npm run启动其通用应用程序,并且您未通过nginx托管简单的html,则应为nginx设置下游源并将所有请求路由到节点服务器,例如默认为localhost:3000

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android