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

问题描述 投票:0回答:2

大家好我正在研究一个使用nuxt js的项目,我只是这个框架的新手。我已将其配置为使用spa模式,因为我没有更改或在我的nuxt配置中添加任何内容,只是默认值。以下是我设置页面的方式。

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

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

我使用npm run build和npm run start命令部署了我的项目。然后dist目录托管在nginx服务器中。

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

我已经读过关于nuxt generate来生成预渲染页面,但在处理数百条记录时这是否合适?

任何帮助,建议,将不胜感激。

谢谢

javascript vue.js vuejs2 vue-router nuxt.js
2个回答
1
投票

你是混合的东西。首先,默认模式是通用aka ssr,而不是spa。 Docs

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

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


2
投票

在一开始你应该了解哪些问题可以帮助你解决问题。

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

  1. 静态页面

在路由的基础上,nuxt生成html文件,这是SEO-frendly。例如,这适用于名片页面(主页面+多个子页面)。你得到现成的html文件,例如index.html,contact.html等

  1. 温泉

不需要SEO的应用程序,但具有动态路径和界面。不使用服务器端呈现。有些方法不可用,但仍然使用nuxt的一些好处。例如,动态路由或nuxt配置中可用的许多选项。

  1. 普遍

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

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

© www.soinside.com 2019 - 2024. All rights reserved.