Nuxt.js 多线程生成命令

Posted 2023-04-27

参考技术A 地址： https://www.homwang.com 欢迎大家性能测试
交流讨论——QQ群号:604203227

[图片上传失败...(image-20b5e-1545290974744)]
[图片上传失败...(image-aadb7c-1545290974744)]
<a href="https://github.com/nuxt/nuxt.js/"><img src="https://img.shields.io/badge/nuxt.js-v2.0.0-800080.svg?style=flat-square" alt=""/></a>

安装包

添加生成脚本到您的 package.json

配置生成的选项到 nuxt.config.js

应该配置 workers 数量。因为它可能没有用来启动 workers，然后在系统中使用处理器的数量。

为了平衡 workers 之间的负荷，他们会被发送成批的线程，否则一个拥有 '简单' 线程的 workers 可能会在其他人之前很久就完成。 workers 还将使用Nuxt的并发选项。

默认的 Nuxt.js routes 方法 已经扩展，因此您可以向其传递其他参数，请参阅以下示例配置中的params参数。默认情况下，它将列出3个时间戳：

当所有 workers 完成时，将调用此方法，它会接收三个参数:

如果需要控制更多生成的路径，请使用 -p 选项将其他参数传递给routes方法。

如果你在bash下使用npm脚本 -- 将会把参数传递给nuxt-generate而不是npm：

您可以使用多个 -v 或 -q 在命令行上增加或减少详细程度。我们使用consola进行日志记录并将默认日志级别设置为3，除非设置了 DEBUG 为5，如果要在不设置DEBUG的情况下记录调试消息，可以在 -vv 命令行上使用

日志级别2、3和4之间的差异是:

Nuxt.js：无法生成路由

【中文标题】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' 似乎不需要）