我在用nuxtjs
当在开发模式下运行时,所有的url都能正常工作,在npm run build和部署到weblogic服务器之后,我只能直接访问webroot。从那里导航到动态路线的工作通过点击周围。然而,当我输入一个应该转换为动态路由的URL(而不是webroot)时,我得到了404(但这在开发模式下有效)。
npm run build
k3fezbri1#
这是因为动态路由被generate命令忽略。您需要手动配置动态路由生成。参见文档
mfpqipee2#
您需要将fallback: true添加到nuxt配置生成参数(docs)。这会将丢失的页面重定向到404.html,然后404.html将加载index.html
fallback: true
404.html
index.html
// nuxt.config.js export default { generate: { fallback: true } }
字符串
pcww981p3#
我对此问题的解决方案是将动态路由转换为静态路由,并将params参数改为query。在我的例子中,/product/_id.vue更改为/product.vue,对params: {id: product_id}的引用更改为query: {id: product_id}。所有的n-link路径都需要从:to="'/product/' + product_id"更新到:to="'/product?id=' + product_id",我不得不将beforeRouteUpdate添加到product.vue页面组件中,以处理更改查询但不更改页面的nuxt链接。
params
query
/product/_id.vue
/product.vue
params: {id: product_id}
query: {id: product_id}
n-link
:to="'/product/' + product_id"
:to="'/product?id=' + product_id"
1tu0hz3e4#
解决方案是使用路由器的hash模式-然后你基本上只有一个路由,nuxt可以在任何情况下处理它。当然,它不是搜索引擎优化友好,但由于您使用的是SPA模式,我相信这不是一个问题。原始答案参见https://stackoverflow.com/a/56693617/7113416
hash
myzjeezk5#
以防万一我自己或别人再次遇到这个问题,我使用的是Nuxt版本3. 6. 2,我的“动态路由”使用的是SSR,我遇到了这个问题。我的“动态路由”页面有一个连字符,像task-search,去掉连字符后(将文件夹重命名为tasksearch),问题就解决了。我的nuxt.config.ts包含:
export default defineNuxtConfig({ ssr: true, routeRules: { '/vLoginRedirect': {ssr: false}, '/vlogout': {ssr: false}, '/**': {ssr: true}, '/tasks/**': { ssr: true }, '/tasksearch/**': { ssr: true }, '/pages/tasks/**': { ssr: true }, '/pages/tasksearch/**': { ssr: true }, },
字符串我真的希望这个页面使用SSR渲染,所以有一个404的“动态路由”页面没有意义,并击败使用SSR的目的。我认为路径中的连字符在某种程度上导致了这个问题。我希望这对我或其他人有帮助。另外,我正在使用Docker和Docker-compose。重新启动docker-compose可能会有帮助。
5条答案
按热度按时间k3fezbri1#
这是因为动态路由被generate命令忽略。您需要手动配置动态路由生成。参见文档
mfpqipee2#
您需要将
fallback: true
添加到nuxt配置生成参数(docs)。这会将丢失的页面重定向到404.html
,然后404.html
将加载index.html
字符串
pcww981p3#
我对此问题的解决方案是将动态路由转换为静态路由,并将
params
参数改为query
。在我的例子中,
/product/_id.vue
更改为/product.vue
,对params: {id: product_id}
的引用更改为query: {id: product_id}
。所有的
n-link
路径都需要从:to="'/product/' + product_id"
更新到:to="'/product?id=' + product_id"
,我不得不将beforeRouteUpdate添加到product.vue页面组件中,以处理更改查询但不更改页面的nuxt链接。1tu0hz3e4#
解决方案是使用路由器的
hash
模式-然后你基本上只有一个路由,nuxt可以在任何情况下处理它。当然,它不是搜索引擎优化友好,但由于您使用的是SPA模式,我相信这不是一个问题。原始答案参见https://stackoverflow.com/a/56693617/7113416
myzjeezk5#
以防万一我自己或别人再次遇到这个问题,我使用的是Nuxt版本3. 6. 2,我的“动态路由”使用的是SSR,我遇到了这个问题。我的“动态路由”页面有一个连字符,像task-search,去掉连字符后(将文件夹重命名为tasksearch),问题就解决了。我的nuxt.config.ts包含:
字符串
我真的希望这个页面使用SSR渲染,所以有一个404的“动态路由”页面没有意义,并击败使用SSR的目的。我认为路径中的连字符在某种程度上导致了这个问题。我希望这对我或其他人有帮助。
另外,我正在使用Docker和Docker-compose。重新启动docker-compose可能会有帮助。