正文 

当前位置： 首页 > 源码 >

Nuxt.js：无法生成路由

     2023-02-22     293

关键词：

【中文标题】Nuxt.js：无法生成路由【英文标题】：Nuxt.js: can't generate routes 【发布时间】：2021-03-12 15:06:51 【问题描述】：

我想为我的项目生成静态路由（/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
,

【问题讨论】：

我在自己的机器上克隆了这个项目，它在 dist 文件夹中生成了路由 @BoussadjraBrahim 知道为什么 Nuxt 在我的机器上运行 npm run generate 时无法生成任何路由吗？ 能否在运行命令后显示截图？ 我使用此类问题在 nuxt.config.js 中的 nuxt.js 上生成站点地图添加到模块“@nuxtjs/sitemap”，然后添加站点地图站点地图： routes () return axios.post( process.env.APP_URL+'/sitemap') .then( res => res.data.map(link => link) ) ，我认为你可以使用相同的行为 @drake035 你必须删除 nuxt 路由器模块并修复文件结构 - gist.github.com/MexsonFernandes/…。我已经克隆并检查了......它的工作完美无缺。 【参考方案1】：

你能试试这个代码吗？

generate: 
 async routes()
   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`))
    return [...routes,
      [
        '/about',
        '/contact',
        '/portfolio'
      ]
    ]

【讨论】：

谢谢，但恐怕结果相同。 你能记录下：来自 axios 的响应，创建一个返回的数组，记录它，然后返回数组并显示使用 Brahim 所说的目录结构 Axios 回复：["/project/14/test", "/project/16/16", "/project/17/17"。关于/pages目录结构：我在这个目录的根目录下有about.vue、contact.vue等，还有它的根目录我有一个/projects文件夹，里面有一个_id.vue文件和一个/slug目录。【参考方案2】：

router.mode='hash' 似乎与generate.routes 配置不兼容。当router.mode设置为hash时，Nuxt生成器ignores generate.routes and only creates a single route for /，大概是因为hash模式下只期望存在着陆页（即index.html设置了一个路由，处理所有路由应用程序）。

那个hash模式也和the mode set in router.js冲突，但是如果你真的需要hash路由，你应该选择只在router.js中设置，让generate.routes被处理。

还要注意mode='universal' 等价于s-s-r=true，因此s-s-r=false config 在该模式下没有意义。如果生成静态站点，您需要s-s-r=true，以便调用任何asyncData() 和fetch() 挂钩来填充您的静态页面数据。此设置还消除了附加 /about, /contact, and /portfolio in dynamicRoutes() 的需要，因为它们已经包含在生成的路由中。

GitHub PR

【讨论】：

【参考方案3】：

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

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

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

【讨论】：

谢谢 :) 但是@tony19 稍早的回答已经解决了我的问题（顺便说一句，target: 'static' 似乎不需要）

nuxt实践

...由及视图。Nuxt.js框架读取该目录下所有的.vue文件并自动生成对应的路由配置。plugins用于组织那些需要在根vue.js应用实例化之前需要运行的Jav 查看详情

nuxt实现全局状态管理导航切换优化

参考技术A那么，Nuxt.js自动生成的路由配置大致如下：样式添加：nuxt路由自动生成，这个时候我们可以自己定义一个route插件在nuxt.config中添加插件这样就实现了我想要的效果了，有更好的方法欢迎交流学习。 查看详情

Nuxt.js 的动态元

...面，并发现这种方法存在几个问题：打开图和推特元标签无法动态更新，因为爬虫不运行JS构建过程中的详细信息页面仅生成一次，并且因此在用户导航之前没有任何相关数据带有URL参数的页面 查看详情

Nuxt.js 中不同子域的不同路由

】Nuxt.js中不同子域的不同路由【英文标题】：DifferentroutesfordifferentsubdomainsinNuxt.js【发布时间】：2019-07-2006:35:20【问题描述】：假设有两个子域为一个nuxt实例工作。他们应该有不同的页面结构。例如可以是：pages/index.vue//technicale... 查看详情

如何在 nuxt.js 中定义路由

】如何在nuxt.js中定义路由【英文标题】：Howtodefinerouteinnuxt.js【发布时间】：2019-04-2421:11:53【问题描述】：我有一个使用Nuxt.Js的博客网站，假设xyz.com并希望显示特定国家/地区代码的所有页面，例如xyz.com/en/home、xyz.com/en/about等。... 查看详情

如何在 nuxt.js 中编写全局路由器功能

】如何在nuxt.js中编写全局路由器功能【英文标题】：howtowriteglobalrouter-functioninnuxt.js【发布时间】：2018-01-1213:11:55【问题描述】：我正在将Vue.js与Nuxt.js一起使用，但路由器的功能出现问题。在纯Vue中，我可以这样写main.js：valroute... 查看详情

Nuxt.js 嵌套路由加载问题

】Nuxt.js嵌套路由加载问题【英文标题】：Nuxt.jsnestedrouteloadingissue【发布时间】：2021-01-0203:11:36【问题描述】：以上所有代码均来自我在pages/apibuilder/models文件夹中的文件_id.vue我用它来用数据填充我的商店asyncasyncData(store)//this.data... 查看详情

nuxt.js服务端渲染中如何实现路由的跳转

一、nuxt.js路由跳转1、nuxt-link标签跳转在html标签内使用nuxt-link跳转，相应于超链接a标签，使用方式如下：<nuxt-linkto="/">首页</nuxt-link>2、编程式导航-JS代码内部跳转实际项目中，很多时候都是通过在JS代码内部进行导航的... 查看详情

快来用nuxt开发静态网站

...网站，又想享受框架开发的舒适，于是选择Nuxt，可用来生成静态站总还是有些蹩脚，比如默认不支持动态路由等。这两个次版本的发布，终于让Nuxt开发静态网站方便多了！先说亮眼新特性：可以处理动态路由和nuxtstart真是太棒... 查看详情

vue-awesome-swiper使用教程

...nust.config.js目录及文件Ⅳ.Nuxt路由➀.pages目录结构自动生成对应的路由配置➁路由跳转注意：不能用a标签代替nuxt-link组件，虽然最终的显示效果一样，但是a标签会刷新页面③动态路由④路由参数校验Nuxt.js可以让你在动态... 查看详情

仅使用 NUXT.js 生成静态 html

】仅使用NUXT.js生成静态html【英文标题】：UsingNUXT.jsjustforstatichtmlgeneration【发布时间】：2018-07-2223:07:27【问题描述】：谁能帮帮我？nuxt有任何选项可以在生成模式下排除_nuxt脚本吗？我只需要生成Vue应用程序的静态html版本。没有... 查看详情

如何在 nuxt.js 上手动触发路由？

】如何在nuxt.js上手动触发路由？【英文标题】：Howtomanuallytriggerroutingonnuxt.js?【发布时间】：2021-07-2623:41:01【问题描述】：我想在回调中登录后手动导航到主页。methods:asyncuserLogin()varsession_url="/api/v1/authenticate";axios.post(session_url,thi... 查看详情

nuxt.js的学习路由组件的学习(代码片段)

...2、axios请求数据3、axios拦截器4、Vue-Router nuxt-link5、动态路由（一）vue的动态路由（二）文件夹动态路由 6、嵌套路由 7、中间件8、Nuxt生命周期流程图分析1、异步加载数据asyncDataasyncData方法会在组件（限于页... 查看详情

当 nuxt.js (vue.js) 中的路由更改时，Facebook 分享按钮消失

】当nuxt.js(vue.js)中的路由更改时，Facebook分享按钮消失【英文标题】：Facebooksharebuttondisappearwhenroutechangedinnuxt.js(vue.js)【发布时间】：2021-11-1913:01:57【问题描述】：在我的nuxt.js("nuxt":"^2.15.7")网络应用程序中，我正在使用fullcodeexampl... 查看详情

javascriptnodejs路由控制是否登录nuxt.js框架(代码片段)

查看详情

在 Nuxt.js 中完全呈现路由后运行函数

】在Nuxt.js中完全呈现路由后运行函数【英文标题】：RunfunctionAFTERroutefullyrenderedinNuxt.js【发布时间】：2019-09-0519:51:09【问题描述】：背景：我正在使用Nuxt构建一个s-s-r网站。我想运行一个脚本到fixsometypographyissues（标题中的孤立... 查看详情

nuxt.js入门安装及灵活使用(代码片段)

...2、安装1.3启动1.4、访问2、目录结构2.1、目录1.2、别名3、路由3.1、路由概述3.2、基础路由3.3、动态路由3.4、动态命名路由3.5、默认路由3.6、嵌套路由3.7、过渡动效3.7.1全局过渡动效设置3.7.2、自定义动画4、视图4.1、默认模板4.2、... 查看详情

如何在 Nuxt 中使路由区分大小写

】如何在Nuxt中使路由区分大小写【英文标题】：HowtomakeroutescasesensitiveinNuxt【发布时间】：2019-12-2017:32:18【问题描述】：我使用nuxt.js+vue.js。我需要创建路由器的区分大小写。我发现了以下属性：caseSensitive。我正在尝试将它放入n... 查看详情