为Electron项目添加Webdriver.io时`import('wdio-electron-service/main')`报错

针对你遇到的wdio-electron-service导入错误及Webpack构建失败问题，可按以下步骤解决：

1. 修复TypeScript模块找不到错误（TS2307） #

• 首先确认已安装wdio-electron-service作为开发依赖：

  npm install wdio-electron-service --save-dev
  

• 若仍报类型声明错误，手动添加模块声明：
  在项目src/types目录下创建wdio-electron-service.d.ts文件，内容如下：

  declare module 'wdio-electron-service/main';
  

• 确保tsconfig.json的include字段包含该类型文件：

  "include": ["src/**/*", "src/types/**/*"]
  

2. 调整Webpack配置适配Electron主进程 #

Vue CLI默认Webpack配置针对浏览器环境，而Electron主进程属于Node.js环境，需修改配置避免Node核心模块报错：
在项目根目录创建/修改vue.config.js，添加以下配置：

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
  configureWebpack: {
    target: 'electron-main', // 指定编译目标为Electron主进程
    resolve: {
      fallback: {
        fs: false, // Node原生模块，无需polyfill
        path: false
      }
    },
    externals: {
      electron: 'commonjs electron' // 将electron标记为外部依赖，不参与打包
    }
  }
});

3. 优化测试环境的模块导入逻辑 #

避免Webpack在生产构建时解析测试相关模块，调整main.ts中的导入代码：

const isTest = process.env.NODE_ENV === "test";
if (isTest) {
  // 使用require确保仅在测试环境加载，或添加webpackIgnore注释
  require('wdio-electron-service/main');
  // 若偏好ES模块动态导入：
  // import(/* webpackIgnore: true */ 'wdio-electron-service/main');
}

完成以上步骤后，重新构建应用即可解决报错，同时测试环境能正常连接Electron应用。

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