Vue2搭配Node18构建报错：TypeError: plugin is not function求助

针对开发环境正常但生产构建失败的问题，核心原因是 Node 18 的环境特性与项目中部分旧版构建依赖（如 sass-loader、cssnano、sass）的兼容性冲突，以下是可落地的解决方案：

方案一：调整 Sass 与 Sass-Loader 版本兼容性 #

你的 sass 版本（^1.69.5）过高，与使用的 sass-loader@8.0.2 不兼容，后者仅支持 Sass < 1.32.0 的版本。修改 package.json 中的依赖版本：

"dependencies": {
  "sass": "^1.32.13"
},
"devDependencies": {
  "sass-loader": "^8.0.2" // 保持此版本，与@vue/cli-service@4.x匹配
}

执行重装命令：

rm -rf node_modules package-lock.json
npm install

方案二：降级 CSSNano 到稳定兼容版本 #

你使用的 cssnano@5.0.0-rc.2 是候选版本，与旧版 postcss 及 @vue/cli-service@4.x 存在兼容性问题，降级到 4.x 稳定版：

"devDependencies": {
  "cssnano": "^4.1.11"
}

同样执行重装命令清理缓存后安装。

方案三：修改 Vue CLI 构建配置适配 Node 18 #

在项目根目录创建或修改 vue.config.js，添加如下配置，强制使用兼容 Node 18 的构建模式：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        implementation: require('sass')
      }
    }
  },
  configureWebpack: {
    resolve: {
      fallback: {
        "path": require.resolve("path-browserify"),
        "os": require.resolve("os-browserify/browser")
      }
    }
  },
  chainWebpack: config => {
    // 禁用现代模式，避免 Node 18 下的语法兼容问题
    config.output.delete('modern')
  }
}

如果缺少依赖，需要安装：

npm install path-browserify os-browserify --save-dev

方案四：升级部分 Vue CLI 插件到兼容 Node 18 的版本 #

将 @vue/cli-service 及相关插件升级到 4.x 系列的最新兼容版本（注意不要升级到 5.x，避免与 Vue 2.7 冲突）：

"devDependencies": {
  "@vue/cli-plugin-babel": "^4.5.19",
  "@vue/cli-plugin-eslint": "^4.5.19",
  "@vue/cli-service": "^4.5.19" // 此版本已修复部分 Node 16+ 兼容问题
}

此步骤需配合方案一或二执行，确保依赖链兼容。

验证步骤 #

完成上述任一方案后，执行构建命令验证：

npm run build

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