[英]Nuxt application returns 404 when dynamic routes are refreshed (Tomcat Server)
我正在做以下事情:
- 生产构建: 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 结束。
请注意:
我的目的是在 Tomcat webapps 文件夹上部署dist
文件夹内容。
当您的应用程序作为单页应用程序 (SPA) 运行时,一切都在原始入口页面内发生 - 当您在路由之间导航时,您实际上并未加载新页面。 只要您不刷新页面,这些路由是否对应于服务器上的实际 html 文件并不重要,因为您的 SPA 知道该做什么。 但是,如果您重新加载页面或从动态路由进入,如果该 URL 上没有 html 文件,静态服务器将提供 404,因为它不知道还能做什么。
您可能已经了解所有这些,因为您正在运行generate
来构建静态页面。 但是 Nuxt 的generate
命令只知道为pages
目录中的*.vue
文件生成页面。 动态路由被忽略。 检查您上传的dist
文件夹 - 每个工作 URL 都应该有一个对应的路径(对应于您的pages
目录),但您不会找到动态路由的文件。
要解决这个问题,您需要为generate
命令提供一组动态路由。 你可以通过向nuxt.config.js
添加这样的东西来nuxt.config.js
这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]
});
}
}
如果您在dist
目录中看到您的页面,您就会知道您的页面正在按预期生成。 显然,对于像您的用户页面这样的内容,这种方法意味着在您的构建之后创建的新用户页面在您的下一次构建之前将不存在。 您可以尝试使用SPA 回退为不匹配的路由加载 SPA。
编辑:您也可以使用hash mode 。 因此,您的 URL 将是https://ip:port/entryPath#dashboard/user/123
而不是https://ip:port/entryPath/dashboard/user/123
https://ip:port/entryPath#dashboard/user/123
。 在这种情况下,服务器总是请求您的根 SPA index.html,它将使用该路由来确定要执行的操作(因此当您导航到该路由时,它应该像现在一样执行)。 如果您这样做,您将只使用 SPA 模式,根本不需要生成任何页面。 这对 SEO 不利,但您将拥有可立即使用的可共享 URL。
您应该将服务器设置为始终为所有不是文件的路由请求 spa 的 index.html。
.htaccess
<ifModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule (.*) index.html [QSA,L]
</ifModule>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.