解决electron-build报错:cannot find module/Please verify that the package . json has

解决electron-build打包后运行app报错:cannot find module xxx/ ****Please verify that the package . json has a valid " main " entry

先看一个简单报错：

或者类似这种：

解决方法：

检查package. Json 中是否写了"main"，这里的"main"必须写，且应当使用npm指令build的dist-electron文件夹中的main.js

那么有人会问了：还没有跑过npm命令呢，没有dist-electron需要自己构建一个吗？答案是不需要,见附录1

json 复制代码

//package.json
{
    "name": "DXY 1st",
    "version": "5.3.0",
    "private": true,
    "description": "DXY 666",
    "author": "DXY",
    "license": "MIT",
    "main": "dist-electron/main.js",

既然你已经会修bug了，那我们就来打boss吧（截图我搞丢了，只剩文字了）：

Background:打包已有的vue3工程（vue3自己的main.js被放进electron的main.js里了），preload.js、renderer.js都用的官网的示例代码，跑完npm run dev总是出bug，且无法transform main.js

Unable to find Electron app at D :\...... .Cannot find module ' D :\ ...... \ dist - electron \ main . js '. Please verify that the package . json has a valid " main " entry

目前为止我没找到针对这个bug的贴子，那就让我来水一贴吧：

检查并修正 main.js中的导入 ：

打开报错信息中提到的 D:\......\dist-electron\main.js文件：

javascript 复制代码

//问题代码main.js

/*先写electron的app块儿

*/

const { app, BrowserWindow, ipcMain} = require('electron')

const path = require('path')

const createWindow = () => {

  const win = new BrowserWindow({

    width: 800,

    height: 600,

    webPreferences: {

      preload: path.join(__dirname, 'preload.js')

    }

  })

  // 开发环境加载 Vite 开发服务器，生产环境加载打包后的文件

  if (process.env.NODE_ENV === 'development') {

    win.loadURL('你的web网址')

  } else {

    win.loadFile('dist/index.html')

  }

    // win.loadFile('index.html')

}



app.whenReady().then(() => {

  ipcMain.handle('ping', () => 'pong')

  createWindow()



  app.on('activate', () => {

    if (BrowserWindow.getAllWindows().length === 0) {

      createWindow()

    }

  })

})



app.on('window-all-closed', () => {

  if (process.platform !== 'darwin') {

    app.quit()

  }

})

/*以下是杂糅在一块儿的Vue工程main.js代码

*/

import { createApp } from 'vue'

import { createPinia } from 'pinia'

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

import App from './App.vue'

import router from './router'

/*.........*/

查找其中是否有导入 App.vue的部分（不是说某一行import，而是说一整个相关的代码块儿），这才是问题的根源，是因为：主进程的代码不应该直接导入前端组件，主进程文件（如 main.js）和渲染进程文件应被正确区分和管理，所以你首先需要思考你导入它的目的：

如果是为了创建浏览器窗口（BrowserWindow）并加载页面，正确的方式应该是使用 loadFile或 loadURL方法来加载一个已经编译好的 HTML 文件（如 index.html），而不是直接导入 .vue文件

具体的做法就是：

1.不要直接使用或拼接Vue工程的main.js，应创建独立的 Electron 主进程文件 electron/main.js :附录2

2.更新vite.config.ts配置

css 复制代码

//vite.config.ts
export default defineConfig({
    base: './',
    plugins: [
        vue(),
        electron({
            main: {
                entry: 'electron/main.js',//更新主入口路径
            }

更新 package.json

json 复制代码

//package.json
{
    "name": "DXY 1st",
    "version": "5.3.0",
    "private": true,
    "description": "DXY 666",
    "author": "duandashuaige",
    "license": "MIT",
    "main": "dist-electron/main.js",//修改主入口

这个问题高发于electron+vue全家桶场景，即对已有的Vue工程打包，虽然不算是难点，但也很容易被忽略

附录：

1.新建electron文件夹，并填充main.js，preload.js，然后终端跑npm run dev会报错：

编辑

同时会自动生成一个dist-electron文件夹，包含两个js：

里面的俩js和之前填充的electron文件夹内的main.js和preload.js的内容是一样的，**但是这俩js是经过编译的，未经编译过的文件electron读不懂，因此一定要先编译再打包！具体原因可以参考我的另一篇贴子：解决electron打包Vue工程(Vite)报错electron : Failed to load URL : xxx... with error : ERR - 掘金

javascript 复制代码

// electron/main.js

const { app, BrowserWindow, ipcMain } = require('electron')

const path = require('path')



const createWindow = () => {

  const win = new BrowserWindow({

    width: 1200,

    height: 800,

    webPreferences: {

      preload: path.join(__dirname, 'preload.js')

    }

  })



  // 开发环境加载 Vite 开发服务器，生产环境加载打包后的文件

  if (process.env.NODE_ENV === 'development') {

    win.loadURL('你的web网址')

  } else {

    win.loadFile('dist/index.html')

  }

}



app.whenReady().then(() => {

  ipcMain.handle('ping', () => 'pong')

  createWindow()



  app.on('activate', () => {

    if (BrowserWindow.getAllWindows().length === 0) {

      createWindow()

    }

  })

})



app.on('window-all-closed', () => {

  if (process.platform !== 'darwin') {

    app.quit()

  }

})

3.官网示例代码4件套，供大家参考：

javascript 复制代码

/*main.js

*/

const { app, BrowserWindow, ipcMain } = require('electron/main')



const path = require('node:path')



const createWindow = () => {

  const win = new BrowserWindow({

    width: 800,

    height: 600,

    webPreferences: {

      preload: path.join(__dirname, 'preload.js')

    }

  })

  win.loadFile('index.html')

}

app.whenReady().then(() => {

  ipcMain.handle('ping', () => 'pong')

  createWindow()

})

javascript 复制代码

/*preload.js

*/

const { contextBridge } = require('electron/renderer')



contextBridge.exposeInMainWorld('versions', {

  node: () => process.versions.node,

  chrome: () => process.versions.chrome,

  electron: () => process.versions.electron

})

xml 复制代码

/*index.html

*/

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <meta

      http-equiv="Content-Security-Policy"

      content="default-src 'self'; script-src 'self'"

    />

    <meta

      http-equiv="X-Content-Security-Policy"

      content="default-src 'self'; script-src 'self'"

    />

    <title>Hello from Electron renderer!</title>

  </head>

  <body>

    <h1>Hello from Electron renderer!</h1>

    <p>👋</p>

    <p id="info"></p>

  </body>

  <script src="./renderer.js"></script>

</html>

javascript 复制代码

/*renderer.js

*/

const information = document.getElementById('info')

information.innerText = `This app is using Chrome (v${window.versions.chrome()}), Node.js (v${window.versions.node()}), and Electron (v${window.versions.electron()})`

官网：使用预加载脚本 | Electron