electron 使用已打包的vue页面

1. 快速创建：https://github.com/electron/electron-quick-start

2. 新建 " .npmrc "文件，添加以下内容

electron_mirror=https://npmmirror.com/mirrors/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

3. 修改devDependencies：
"devDependencies": { 
 "electron": "^22.3.2", "
 electron-builder": "^23.6.0" 
 }

注：从23.0​.0开始，不再支持win7/win​8/win8.1

4. 运行：npm i

二. 使用打包后的vue文件

将已打包的dist文件重命名后放入项目根目录，如vue-dist.
然后在main.js中将mainWindow.loadFile改为mainWindow.loadFile(path.join(__dirname, 'vue-dist/index.html')).
运行npm run start

如果运行后的窗口为白屏，解决方法为：

1.  在vue项目中，把vue.config.js文件的publicPath改为publicPath: './'，重新打包.
2. ...

三. 修改main.js

常用修改配置：
width: 800,  //宽
height: 600,  //高
autoHideMenuBar: true, //关闭自带菜单栏

app.disableHardwareAcceleration() //关闭硬件加速

mainWindow.webContents.openDevTools() 打开控制台

mainWindow.once('ready-to-show', () => { mainWindow.maximize(); }); 默认最大化


四. 安装electron-builder

运行 npm install electron-builder

新建electron-builder.yml，填写打包配置，详情见评论文件。
在package.json新增script：
"build": "electron-builder", 
 "build:win": "electron-builder --win", 
 "build:mac": "electron-builder --mac", 
 "build:linux": "electron-builder --linux", 
 "build:win32": "electron-builder --win --ia32"


五. 执行打包
​   新建build文件夹，放置应用图标
     执行命令，在build文件夹中查看打包后应用