Vue+Electron项目运行electron:serve时node-loader无法处理node_modules内.node文件怎么办

解决方案 #

你配置的node-loader未生效的核心原因是vue-cli-plugin-electron-builder的主进程、渲染进程使用两套独立的Webpack配置，你之前在全局chainWebpack中添加的规则仅作用于渲染进程，主进程打包时未加载对应规则，同时你配置的打包规则全量排除了node_modules，导致原生模块无法被正常加载。按以下步骤调整即可：

1. 修改vue.config.js配置

重点补充主进程Webpack的node-loader规则、将msnodesqlv8设为外部依赖，修正打包文件过滤规则：

module.exports = {
  transpileDependencies: [
    'vuetify'
  ],
  configureWebpack: {
    devtool: 'source-map',
    // 新增：将原生模块设为外部依赖，不打入bundle
    externals: {
      'msnodesqlv8': 'commonjs2 msnodesqlv8'
    }
  },
  pluginOptions: {
    electronBuilder: {
      preload: 'preload/preload.js',
      "directories": {
        "buildResources": "build"
      },
      mainProcessWatch:['src/services/background/**'],
      "files": [
        "build/**/*",
        // 修正：不要全量排除node_modules，保留msnodesqlv8相关文件
        "!node_modules/**/*",
        "node_modules/msnodesqlv8/**/*"
      ],
      "win": {
          "asar": false,
          "target": "nsis",
          "icon": "build/icon.ico"
      },
      "nsis": {
        "installerIcon": "build/icon.ico",
        "installerHeaderIcon": "build/icon.ico",
        "deleteAppDataOnUninstall": true
      },
      // 新增：主进程Webpack配置，添加node-loader
      chainWebpackMainProcess: config => {
        config.module
          .rule('node')
          .test(/\.node$/)
          .use('node-loader')
          .loader('node-loader')
          .end();
      }
    }
  },
  chainWebpack: config => {
    config
        .plugin('html')
        .tap(args => {
            args[0].title = "Configuration Utility";
            return args;
        });

    config.module
          .rule('node')
          .test(/\.node$/)
          .use('node-loader')
          .loader('node-loader')
          .end();

    config.module
          .rule('pug')
          .test(/\.pug$/)
          .use('pug-plain-loader')
          .loader('pug-plain-loader')
          .end();
  }
}

2. 调整模块引用方式

msnodesqlv8是Node原生模块，不可直接在Electron渲染进程中引入，需要将相关逻辑移到主进程实现，通过IPC通信和渲染进程交互。

3. 清理缓存后重启

执行以下命令清理旧的打包缓存再启动服务：

npm run electron:serve -- --clean

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