解决electron-build打包后运行app报错:cannot find module xxx/ Please verify that the package . json has a valid " main " entry
解决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
//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文件：
//问题代码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配置
//vite.config.ts
export default defineConfig({
base: './',
plugins: [
vue(),
electron({
main: {
entry: 'electron/main.js',//更新主入口路径
}
- 更新 package.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 _CONNECTION_REFUSED
// 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件套，供大家参考：
/*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()
})
/*preload.js
*/
const { contextBridge } = require('electron/renderer')
contextBridge.exposeInMainWorld('versions', {
node: () => process.versions.node,
chrome: () => process.versions.chrome,
electron: () => process.versions.electron
})
/*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>
/*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
浙公网安备 33010602011771号