vue.js nuxtjs spa动态路由在产品部署后生成404

ldfqzlk8  于 2023-08-07  发布在  Vue.js
关注(0)|答案(5)|浏览(293)

我在用nuxtjs

  • v.1.4.0
  • 在nuxt.config.js中设置spa模式
  • 使用动态路由

当在开发模式下运行时,所有的url都能正常工作,在npm run build和部署到weblogic服务器之后,我只能直接访问webroot。从那里导航到动态路线的工作通过点击周围。然而,当我输入一个应该转换为动态路由的URL(而不是webroot)时,我得到了404(但这在开发模式下有效)。

k3fezbri

k3fezbri1#

这是因为动态路由被generate命令忽略。您需要手动配置动态路由生成。参见文档

mfpqipee

mfpqipee2#

您需要将fallback: true添加到nuxt配置生成参数(docs)。这会将丢失的页面重定向到404.html,然后404.html将加载index.html

// nuxt.config.js
export default {
  generate: {
    fallback: true
  }
}

字符串

pcww981p

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链接。

1tu0hz3e

1tu0hz3e4#

解决方案是使用路由器的hash模式-然后你基本上只有一个路由,nuxt可以在任何情况下处理它。当然,它不是搜索引擎优化友好,但由于您使用的是SPA模式,我相信这不是一个问题。
原始答案参见https://stackoverflow.com/a/56693617/7113416

myzjeezk

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可能会有帮助。

相关问题