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相关的API
contextIsolation: false, // 可以使用require方法
enableRemoteModule: true, // 可以使用remote方法
},
})
// 监听html
mainWindow.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.html
mainWindow.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相关的API
contextIsolation: 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.html
mainWindow.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, // 开启热更新
},
})
文章来源地址https://www.toymoban.com/news/detail-510725.html
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"
}
}
6.记住去把main.js中的env改成非pro 可以是pro2或者其他都可以,不是pro就行
7.打开终端运行命令npm run electron:build
npm run electron:build
等终端运行完毕,会在目录中生成一个builder文件夹,app就在里面
到这里打包为exe就完成了,需要注意的是 这里是根据你自己的电脑配置打包的
这里我没有去掉状态栏,如果要去掉状态栏,在main.js中把这个注释解开就好
都看到这里了,写教程不易,如果对你有帮助,给个点赞收藏不过分吧。 文章来源:https://www.toymoban.com/news/detail-510725.html
到了这里,关于vite+ vue3(现有项目或者新项目)+electron打包教程,以及electron代码热重载页面(保姆级教程),一文带你走完全过程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!