时间戳

首页 > 解决方案 > Nuxt.js：无法生成路由

vue.js - Nuxt.js：无法生成路由

问题描述

我想为我的项目生成静态路由（/contact, /about, ...）和动态路由（/project/1, /project/2,...），这样当用户在访问任何这些路由时刷新页面时，页面仍然有效。

但是当我这样做时，npm run generate我只Generated route "/"在/dist文件夹中看到没有生成路由。

使用的 Nuxt.js 版本：2.14.7

我尝试了两种模式，它都不能universal。spa

在 nuxt.config.js 我在顶部：

const axios = require('axios')

const dynamicRoutes = async () => {
  const routes = await axios.get('http://my-project.com/wp/wp-json/projects/v1/posts')
    .then(res => res.data.map((project) => `/project/${project.ID}/${project.post_name}`))
    .then(res => res.concat(
      [
        '/about',
        '/contact',
        '/portfolio'
      ]
    ))
  return routes
}

然后在export default {}：

generate: {
  routes: dynamicRoutes
},

标签： vue.jsroutesnuxt.js

解决方案

首先，您不必mode: 'universal'在配置中添加。添加target: 'static'以简化它。阅读更多 - https://nuxtjs.org/docs/2.x/features/deployment-targets/。您将获得带有ssr: true相关钩子的完整静态模式网站，如https://stackoverflow.com/a/65208463/8153537中所述。

接下来，您可以删除 @nuxt/router 模块。检查我的要点 - https://gist.github.com/MexsonFernandes/d04495c86b115bbe29f26b36b0b35d2d。Nuxt 将根据文件夹结构生成所有必需的路由。所以不需要额外的配置。

检查项目页面路线的要点 - https://gist.github.com/MexsonFernandes/d04495c86b115bbe29f26b36b0b35d2d#gistcomment-3555332。

推荐阅读