600字范文 > vite+ vue3（现有项目或者新项目）+electron打包教程以及electron代码热重载页面（

vite+ vue3（现有项目或者新项目）+electron打包教程以及electron代码热重载页面（

时间：2022-01-26 19:25:13

1.安装electron,通过npm下载electron 需要全局安装

npm i -s electron -D

2.在和src同级的目录中新建一个electron文件夹，在文件夹中新建main.js

3.修改package.json文件

1.删掉type这个字段，不然会报错

2.然后加上"main": "electron/main.js",

3.在scripts字段中加入启动electron的命令：如下图

4.在刚才创建的electronx文件夹下main.js中加入以下代码

// 控制应用生命周期和创建原生浏览器窗口的模组const { app, BrowserWindow, Menu } = require('electron')const path = require('path')// process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = true // 关闭控制台的警告function createWindow() {// 创建浏览器窗口const mainWindow = new BrowserWindow({width: 1200,height: 800,webPreferences: {// 书写渲染进程中的配置nodeIntegration: true, //开启true这一步很重要,目的是为了vue文件中可以引入node和electron相关的APIcontextIsolation: false, // 可以使用require方法enableRemoteModule: true, // 可以使用remote方法},})// 监听htmlmainWindow.loadFile(path.resolve(__dirname, '../dist/index.html'))}// 这段程序将会在 Electron 结束初始化// 和创建浏览器窗口的时候调用// 部分 API 在 ready 事件触发后才能使用。app.whenReady().then(() => {createWindow()app.on('activate', function () {// 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他// 打开的窗口，那么程序会重新创建一个窗口。if (BrowserWindow.getAllWindows().length === 0) createWindow()})})// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。因此，通常对程序和它们在// 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。app.on('window-all-closed', function () {if (process.platform !== 'darwin') app.quit()})

5.这时候你去打开控制台输入输入npm run start会得到一片空白，展示如下页面

1.因为现在监听的是vue打包后的dist文件夹中的index.html

2.我就不教你们怎么打开那个了，没必要，我们直接开始配置热更新不香吗

5.配置加载代码热更新

1.下载electron-reload模块

npm i electron-reload

2. 在electron的配置文件中加入下列代码

// 配置热更新 let env = 'pro'if (env == 'pro') {const elePath = path.join(__dirname, '../node_modules/electron')require('electron-reload')('../', {electron: require(elePath),})// 热更新监听窗口mainWindow.loadURL('http://localhost:8888')// 打开开发工具mainWindow.webContents.openDevTools()} else {// 生产环境中要加载文件，打包的版本// Menu.setApplicationMenu(null)// 加载 index.htmlmainWindow.loadFile(path.resolve(__dirname, '../dist/index.html')) // 新增}

全部的main.js代码可直接复制使用

// 控制应用生命周期和创建原生浏览器窗口的模组const { app, BrowserWindow, Menu } = require('electron')const path = require('path')function createWindow() {// 创建浏览器窗口const mainWindow = new BrowserWindow({width: 1200,height: 800,webPreferences: {// 书写渲染进程中的配置nodeIntegration: true, //开启true这一步很重要,目的是为了vue文件中可以引入node和electron相关的APIcontextIsolation: false, // 可以使用require方法enableRemoteModule: true, // 可以使用remote方法},})let env = 'pro'// 配置热更新if (env == 'pro') {const elePath = path.join(__dirname, '../node_modules/electron')require('electron-reload')('../', {electron: require(elePath),})// 热更新监听窗口mainWindow.loadURL('http://localhost:8888')// 打开开发工具mainWindow.webContents.openDevTools()} else {// 生产环境中要加载文件，打包的版本// Menu.setApplicationMenu(null)// 加载 index.htmlmainWindow.loadFile(path.resolve(__dirname, '../dist/index.html')) // 新增}}// 这段程序将会在 Electron 结束初始化// 和创建浏览器窗口的时候调用// 部分 API 在 ready 事件触发后才能使用。app.whenReady().then(() => {createWindow()app.on('activate', function () {// 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他// 打开的窗口，那么程序会重新创建一个窗口。if (BrowserWindow.getAllWindows().length === 0) createWindow()})})// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。因此，通常对程序和它们在// 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。app.on('window-all-closed', function () {if (process.platform !== 'darwin') app.quit()})

3.其中的env是阀门方便打包成app，开发中热更新就使用env=pro就好了

4.因为监听的是8888端口，所以我们需要去更改vue的运行端口，在vite.config.js中加入以下代码

export default defineConfig({plugins: [vue()],server: {port: 8888,cors: true, // 允许跨域hmr: true, // 开启热更新},})

5.开启两个终端，一个终端运行vue的项目启动因为我的是默认配置所以是 npm run dev

另一个终端运行 npm run start,这个时候你就发现，代码可以热更新了

5.得到如下图，就证明你的项目成功运行了，热更新也启动了

6.打包

1.在上文的main.js配置中，已经配置了打包的监听的文件

2.我们需要下载打包模块，我这里使用的是electron-builder 需要全局安装

npm i electron-builder -D

3.在vite.config.js中更改根路径，新增base

4.在package.json中新增打包命令

"electron:build": "vite build & electron-builder build --config electron-builder.json"

5.在src同级目录中新建打包配置文件electron-builder.json，在里面加入以下代码

{"productName": "app名字","files": ["./electron/main.js", "./dist"],"extraFiles": ["./videos", "./cvideo"], // 保留的文件夹"directories": {"output": "./buileder"}}