解决electron-build打包后运行app报错:cannot find module

​
解决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

1. //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文件：

1. //问题代码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配置

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

复制代码

• 更新 package.json
  

1. //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 _CONNECTION_REFUSED

• 
  

1. // 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件套，供大家参考：

1. /*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() })

复制代码

1. /*preload.js */ const { contextBridge } = require('electron/renderer') contextBridge.exposeInMainWorld('versions', { node: () => process.versions.node, chrome: () => process.versions.chrome, electron: () => process.versions.electron })

复制代码

[code]/*index.html */             Hello from Electron renderer!Hello from Electron renderer!



来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

懂技术并乐意极积无私分享的人越来越少。珍惜