Vue项目npm run build报No element indexed by 9错误求助

开发集成Tailwind、PostCSS及相关依赖的Vue应用时，构建行为存在异常：

• 执行npm run serve调用vue-cli-service serve启动开发服务，全程运行无报错
• 执行npm run build调用vue-cli-service build做生产环境构建时，抛出Building for production...Unhandled rejection Error: No element indexed by 9错误，报错后构建进程进入死循环
• 已按照Tailwind官方PostCSS 7兼容版指引完成配置，尝试删除node_modules目录后重新执行npm install重装依赖，问题仍未解决

Building for production...tailwindcss: postcss.plugin was deprecated.

\  Building for production...Unhandled rejection Error: No element indexed by 9
    at ArraySet_at [as at] (C:\Users\benny\Documents\Programmieren\Vue\cellCalculator\node_modules\source-map\lib\array-set.js:109:9)
    at BasicSourceMapConsumer.<anonymous> (C:\Users\benny\Documents\Programmieren\Vue\cellCalculator\node_modules\source-map\lib\source-map-consumer.js:155:58)
    at Array.map (<anonymous>)
    at BasicSourceMapConsumer.SourceMapConsumer_eachMapping [as eachMapping] (C:\Users\benny\Documents\Programmieren\Vue\cellCalculator\node_modules\source-map\lib\source-map-consumer.js:146:14)
    at Function.SourceNode_fromStringWithSourceMap [as fromStringWithSourceMap] (C:\Users\benny\Documents\Programmieren\Vue\cellCalculator\node_modules\source-map\lib\source-node.js:86:24)
    at SourceMapSource.node (C:\Users\benny\Documents\Programmieren\Vue\cellCalculator\node_modules\webpack-sources\lib\SourceMapSource.js:32:25)
    at ReplaceSource.node (C:\Users\benny\Documents\Programmieren\Vue\cellCalculator\node_modules\webpack-sources\lib\ReplaceSource.js:82:27)
    at CachedSource.node (C:\Users\benny\Documents\Programmieren\Vue\cellCalculator\node_modules\webpack-sources\lib\CachedSource.js:18:24)
    at ReplaceSource.node (C:\Users\benny\Documents\Programmieren\Vue\cellCalculator\node_modules\webpack-sources\lib\ReplaceSource.js:82:27)
    at C:\Users\benny\Documents\Programmieren\Vue\cellCalculator\node_modules\webpack-sources\lib\ConcatSource.js:59:50
    at Array.map (<anonymous>)
    at ConcatSource.node (C:\Users\benny\Documents\Programmieren\Vue\cellCalculator\node_modules\webpack-sources\lib\ConcatSource.js:58:63)
    at ConcatSource.proto.sourceAndMap (C:\Users\benny\Documents\Programmieren\Vue\cellCalculator\node_modules\webpack-sources\lib\SourceAndMapMixin.js:29:18)
    at CachedSource.sourceAndMap (C:\Users\benny\Documents\Programmieren\Vue\cellCalculator\node_modules\webpack-sources\lib\CachedSource.js:58:31)
    at getTaskForFile (C:\Users\benny\Documents\Programmieren\Vue\cellCalculator\node_modules\webpack\lib\SourceMapDevToolPlugin.js:65:30)
    at C:\Users\benny\Documents\Programmieren\Vue\cellCalculator\node_modules\webpack\lib\SourceMapDevToolPlugin.js:215:20

\  Building for production...

该错误是依赖版本不兼容导致的SourceMap解析失败：

• Vue CLI 4/5内置的webpack 4依赖0.6.x版本的旧版source-map包，当PostCSS、Tailwind相关依赖版本错配时，会生成不符合旧版source-map规范的映射文件，触发数组越界报错No element indexed by 9
• 日志中的postcss.plugin was deprecated提示说明PostCSS生态存在版本冲突：当前安装的PostCSS 7兼容版Tailwind，和项目中残留的PostCSS 8版本相关插件存在混用
• 开发环境serve命令默认不会执行完整的生产环境压缩、SourceMap合并逻辑，因此不会触发该错误

方案1：统一PostCSS 7生态依赖（适配Vue CLI 4/5 + webpack4场景） #

如果不想升级现有构建工具，直接把所有PostCSS相关依赖锁定到PostCSS 7兼容版本即可：

1. 卸载现有冲突的Tailwind、PostCSS相关依赖

npm uninstall tailwindcss postcss autoprefixer

2. 安装PostCSS 7兼容版本的对应依赖

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

3. 校验package.json中其他PostCSS相关插件的版本，确保适配PostCSS 7：
   • postcss-loader版本锁定为^4.3.0，更高版本要求PostCSS 8
   • cssnano版本锁定为^4.1.11，更高版本要求PostCSS 8
4. 删除依赖缓存和锁文件后重新安装

# Windows系统执行
rmdir /s /q node_modules
del package-lock.json
npm install

5. 重新执行npm run build验证构建结果

方案2：关闭生产环境SourceMap快速绕过 #

如果不需要生产环境源码映射能力，直接修改配置关闭生产环境SourceMap生成，跳过触发报错的逻辑：

// vue.config.js
module.exports = {
  productionSourceMap: false,
  // 保留原有其他配置
}

修改后直接执行构建即可，该方案不影响生产环境代码运行，仅会失去生产环境源码定位能力。

方案3：升级构建链适配PostCSS 8 #

如果可以升级构建工具，直接升级到原生支持PostCSS 8的环境，从根源解决版本冲突：

1. 升级Vue CLI服务到最新5.x版本

npm update @vue/cli-service -D

2. 安装原生支持PostCSS 8的Tailwind及相关依赖

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

3. 清理依赖缓存重新安装后，执行构建验证即可。

如果上述操作后问题仍存在，按以下顺序校验：

• 执行npm ls postcss查看项目内PostCSS安装情况，确保全局只有一个PostCSS主版本，不存在多版本嵌套
• 检查postcss.config.js配置，确保没有引用仅支持PostCSS 8的插件
• 检查自定义webpack配置中的SourceMap规则，不要使用webpack 4不支持的高版本SourceMap类型

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