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

Question

我正在使用 nuxtjs

v.1.4.0
在 nuxt.config.js
使用动态路由

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

Answer 1

这是因为生成命令忽略了动态路由。您需要手动配置动态路由生成。参见 docs

Answer 2

我对这个问题的解决方案是将动态路由转换为静态路由，并将 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更改查询但未更改页面的链接。

Answer 3

解决方案是使用路由器的 hash mode - 那么你基本上只有一条路由，nuxt 可以在任何情况下处理它。当然这对 SEO 不友好，但由于您使用的是 SPA 模式，我相信这不是问题。

原始答案请参阅

Answer 4

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

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

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

nuxtjs spa dynamic routes generate 404 after prod deployment

routing

dynamic

vue.js

nuxt.js