Vite环境下Storybook无法启动：脚本执行无关Node.js文件

算力阿峰

2026-7-4

重要提示：请查看下方“更新”内容。

我在Vite 4.5.0 环境下运行Vue.js的Storybook 7.5.3，Node.js版本为v21.1.0。执行npm run storybook时出现以下错误：

[29648:1206/145822.304:ERROR:node_bindings.cc(303)] 
Most NODE_OPTIONs are not supported in packaged apps. See documentation for more details.

该问题必然与./node_modules/.bin/下的storybook二进制文件有关，其脚本内容如下：

#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")

case `uname` in
    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
esac

exec "$basedir/../spdx-correct/index.js"   "$@"

错误出现后，VSCode会自动打开上述脚本中引用的.../spdx-correct/index.js文件。即使省略或清空NODE_OPTIONS环境变量，仍会出现该错误。

更新

今日重启机器后，“Most NODE_OPTIONs...”错误不再出现，但VSCode仍会打开spdx-correct/index.js文件。脚本执行该无关.js文件的行为毫无逻辑，这应该是核心问题。为何storybook会尝试执行一个与Storybook服务进程无关的Node.js脚本？

系统信息

Windows 11
Node.js v21.1.0
NPM v10.2.0
Storybook v7.5.3
Vite v4.5.0

注意： 升级到Storybook v7.6.0后问题依旧。

.storybook/main.js 配置

export default {
  stories: ['../src/**/*.stories.js'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
  staticDirs: ['../public'],
  framework: {
    name: "@storybook/vue3-vite",
    options: {}
  },
  core: {
    builder: '@storybook/builder-vite', // 👈 The builder enabled here.
    disableTelemetry: true,
  },
  docs: {
    autodocs: true
  }
};

package.json 配置

{
  /* ... */
  "scripts": {
    "dev": "vite",
    "serve": "npm run dev",
    "build": "vite build",
    "preview": "vite preview",
    "test:unit": "vitest",
    "lint": "vue-cli-service lint",
    "build-storybook": "storybook build",
    "compile": "rollup -c --bundleConfigAsCjs",
    "prepublish": "npm run compile",
    "storybook": "storybook dev"
  },
  "main": "dist/library.min.js",
  "module": "dist/library.min.mjs",
  "files": [
    "dist/*"
  ],
  "dependencies": {
    "@vuelidate/core": "^2.0.0",
    "@vuelidate/validators": "^2.0.0",
    "autosize": "^5.0.2",
    "case": "^1.6.3",
    "dayjs": "^1.11.7",
    "floating-vue": "^2.0.0-beta.20",
    "vue-draggable-plus": "^0.2.7"
  },
  "devDependencies": {
    "@babel/core": "^7.18.9",
    "@faker-js/faker": "^7.6.0",
    "@rollup/plugin-commonjs": "^23.0.3",
    "@rollup/plugin-node-resolve": "^13.3.0",
    "@rollup/plugin-terser": "^0.2.0",
    "@storybook/addon-actions": "^7.0.18",
    "@storybook/addon-essentials": "^7.0.18",
    "@storybook/addon-interactions": "^7.0.18",
    "@storybook/addon-links": "^7.0.18",
    "@storybook/builder-vite": "^7.5.3",
    "@storybook/cli": "^7.0.18",
    "@storybook/testing-library": "^0.1.0",
    "@storybook/vue3": "^7.0.18",
    "@storybook/vue3-vite": "^7.5.3",
    "@testing-library/vue": "^7.0.0",
    "@vitejs/plugin-vue": "^4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/test-utils": "^2.4.1",
    "@vue/vue3-jest": "^27.0.0-alpha.1",
    "babel-jest": "^27.0.6",
    "babel-loader": "^8.2.5",
    "deepmerge": "^4.3.1",
    "eslint": "^8.49.0",
    "eslint-plugin-vue": "^9.17.0",
    "jest": "^27.0.5",
    "jsdom": "^22.1.0",
    "numeral": "^2.0.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "rollup": "^3.5",
    "rollup-plugin-clear": "^2.0.7",
    "rollup-plugin-filesize": "^9.1.2",
    "rollup-plugin-import-css": "^3.1.0",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-progress": "^1.1.2",
    "rollup-plugin-version-injector": "^1.3.3",
    "rollup-plugin-visualizer": "^5.8.3",
    "rollup-plugin-vue": "^6.0.0",
    "sass": "^1.26.5",
    "storybook": "^7.0.18",
    "storybook-dark-mode": "^3.0.0",
    "vite": "^4.4.11",
    "vitest": "^0.34.6",
    "vue": "^3.3.8",
    "vue-loader": "^16.8.3",
    "vue-router": "^4.1.5"
  },
  "overrides": {
    "markdown-to-jsx": "7.2.1",
    "node-ipc@>9.2.1 <10": "9.2.1",
    "node-ipc@>10.1.0": "10.1.0"
  },
  "peerDependencies": {
    "vue": "^3.3.8"
  },
  "license": "ISC"
}

内容的提问来源于stack exchange，提问作者squirrelwhisperer