vue.js - storybook build 报错？

Question

错误提示如下：

sb-common-assets/fonts.css doesn't exist at build time, it will remain unchanged to be resolved at runtimetransforming (625) src/tabs/index.ts<--- Last few GCs --->[1931:0x128008000]    49861 ms: Mark-Compact 4077.6 (4141.5) -> 4071.6 (4143.5) MB, 1921.42 / 0.00 ms  (average mu = 0.151, current mu = 0.006) allocation failure; scavenge might not succeed[1931:0x128008000]    52198 ms: Mark-Compact 4073.7 (4143.8) -> 4072.4 (4144.3) MB, 2131.29 / 0.00 ms  (average mu = 0.118, current mu = 0.088) allocation failure; GC in old space requested<--- JS stacktrace --->FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory----- Native stack trace ----- 1: 0x100a4d53c node::Abort() [/usr/local/bin/node]

storybook 版本

    "@storybook/addon-essentials": "~8.0.10",    "@storybook/addon-interactions": "~8.0.10",    "@storybook/addon-links": "~8.0.10",    "@storybook/blocks": "~8.0.10",    "@storybook/cli": "~8.0.10",    "@storybook/test": "~8.0.10",    "@storybook/vue3": "~8.0.10",    "@storybook/vue3-vite": "~8.0.10",

Answer 1

错误提示表明你遇到了两个问题：

1. sb-common-assets/fonts.css 文件在构建时不存在，但 Storybook 尝试在运行时解析它。这通常是因为文件路径或引用不正确，或者该文件尚未生成。
2. JavaScript 堆内存溢出。这通常发生在构建大型项目或处理大量文件时，Node.js 进程耗尽可用的内存。

针对第一个问题，你需要确保 sb-common-assets/fonts.css 文件的路径是正确的，并且该文件存在于项目中。如果该文件是由 Storybook 的某个插件或配置生成的，你需要检查相关的插件或配置是否正确无误。

针对第二个问题，你可以尝试增加 Node.js 进程的内存限制。这可以通过设置 --max-old-space-size 标志来实现，该标志指定了 V8 引擎用于老生代堆内存的最大值（以 MB 为单位）。

你可以通过以下命令来运行 Storybook 构建，并增加内存限制：

node --max-old-space-size=4096 node_modules/.bin/storybook build

这里的 4096 是内存限制的大小，你可以根据需要调整。如果问题依旧存在，可能需要继续增加内存限制，或者检查项目构建配置是否有优化的空间。

如果问题依旧无法解决，你或许需要检查 Storybook 的配置文件（通常是 .storybook/main.js 和 .storybook/preview.js），确保所有的插件和配置都兼容当前版本的 Storybook，并且没有错误或遗漏。同时，确保你使用的是与 Storybook 版本相匹配的 Node.js 和 npm/yarn 版本。