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

Question

我正在使用nuxtjs

• v.1.4.0
在nuxt.config.js中设置的
• spa模式
• 具有动态路由

在开发模式下运行时，所有URL都可以正确工作，npm run build并部署到Weblogic服务器后，我只能直接访问Webroot。 从那里导航到动态路线，只需单击即可。 但是，当我输入应该转换为动态路由的URL（不是Webroot）时，会得到404（但这在开发模式下有效）。

Answer 1

这是因为generate命令忽略了动态路由。您需要手动配置动态路由生成。参见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"，我必须在product.vue页面组件中添加beforeRouteUpdate才能处理更改了查询，而不是页面。

Answer 3

解决方案是使用路由器的hash mode-那么您基本上只有一条路由，无论哪种情况，nuxt都可以处理。当然，它不是SEO友好的，但是由于您使用的是SPA模式，所以我认为这不是问题。

有关原始答案，请参见https://stackoverflow.com/a/56693617/7113416

Answer 4

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

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