织梦 修改网站logo,中国建筑设计研究院官网,品牌建设全面升级,建设网站管理规定说明#xff1a;后续项目需要web端和桌面端#xff0c;为了提高开发效率#xff0c;准备直接将web端的代码打包成桌面端#xff0c;在此提前记录一下demo打包的过程#xff0c;需要注意的是vue2或者vue3vitets或者vue-cli的打包方式各不同#xff0c;如果你的项目不是vue…说明后续项目需要web端和桌面端为了提高开发效率准备直接将web端的代码打包成桌面端在此提前记录一下demo打包的过程需要注意的是vue2或者vue3vitets或者vue-cli的打包方式各不同如果你的项目不是vue3vitejs就不用再往下看了哈再找找别的教程~
一、准备
1.demo项目准备
先提前准备好一个现有的web端项目我随便拿了一个之前做过的项目来做demo
2.安装electron依赖
npm install electron 3.修改vite.config.js文件
主要是修改配置文件路径
import { defineConfig } from vite
import vue from vitejs/plugin-vue// https://vitejs.dev/config/
export default defineConfig({base: ./, // 新增,打包的dist文件的index.html引入资源css/js的路径,这里使用相对路径,预防找不到的问题plugins: [vue()]
})4.在根目录添加main.js文件
这是electron运行的入口文件
// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow } require(electron)
const path require(path)function createWindow () {// 创建浏览器窗口const mainWindow new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, preload.js)}})// 加载 index.htmlmainWindow.loadFile(dist/index.html) // 此处跟electron官网路径不同需要注意// 打开开发工具// mainWindow.webContents.openDevTools()
}// 这段程序将会在 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()
})// 在这个文件中你可以包含应用程序剩余的所有部分的代码
// 也可以拆分成几个文件然后用 require 导入。5.在根目录添加preload.js文件
// 所有Node.js API都可以在预加载过程中使用。
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener(DOMContentLoaded, () {const replaceText (selector, text) {const element document.getElementById(selector)if (element) element.innerText text}for (const dependency of [chrome, node, electron]) {replaceText(${dependency}-version, process.versions[dependency])}
})6.修改package.json文件
新增两处如下
到这里准备工作已经完成了
二、正式开始打包
1.打包web项目 npm run build 2.运行electron
看看是否可以正常运行 npm run electron:serve 3.热更新开发环境
3.1修改main.js文件
3.2开启vite和electron服务
注意要先运行vite让开发服务器的url 可以正常访问才能再开启electron加载url
这需要安装两个依赖:
concurrently阻塞运行多个命令-k参数用来清除其它已经存在或者挂掉的进程wait-on等待资源此处用来等待url可访问
npm有可能不成功可以自己换cnpm pnpm yarn... cnpm install -D concurrently wait-on 3.3 修改package.json文件
两条命令添加完成
yarn electron为等待tcp协议5173端口可访问然后执行electronyarn electron:serve为阻塞执行开发服务器运行和yarn electron命令
运行项目只要执行命令yarn electron:serve或者npm run electron:serve即可当修改项目文件时桌面应用也将自动更新。
4. 开始打包
4.1 创建electron文件
将main.js和preload.js文件移进来 4.2修改electron/main.js文件
// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow } require(electron)
const path require(path)const NODE_ENV process.env.NODE_ENV //新增
// const NODE_ENV development // 判断开发或生产模式(建议写成这种,开发模式就可以用,等即将打包了再把这个变量换成打包模式)function createWindow () {// 创建浏览器窗口const mainWindow new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, preload.js)}})// 加载 index.html// mainWindow.loadFile(dist/index.html) // 此处跟electron官网路径不同需要注意mainWindow.loadURL(NODE_ENV development? http://localhost:8889:file://${path.join(__dirname, ../dist/index.html)}); // 新增// 打开开发工具if (NODE_ENV development) {mainWindow.webContents.openDevTools()} // 新增
}// 这段程序将会在 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()
})// 在这个文件中你可以包含应用程序剩余的所有部分的代码
// 也可以拆分成几个文件然后用 require 导入。4.3修改package.json文件
将main: main.js改为main: electron/main.js添加build属性: build: {appId: com.dweb.demo, //包id com.dweb.项目名productName: ElectronApp, // 项目名copyright: Copyright © 2021 your-name, // 版权信息mac: {category: public.app-category.utilities},nsis: {oneClick: false,allowToChangeInstallationDirectory: true},files: [dist/**/*,electron/**/*],directories: {buildResources: assets, //静态文件资源获取目录output: dist_electron // 打包位置,会新建到项目根目录}},
修改scripts属性
先下载两个依赖
npm install -D cross-env electron-builder
{dev: vite,build: vite build,serve: vite preview,electron: wait-on tcp:8889 cross-env NODE_ENVdevelopment electron ., electron:serve: concurrently -k \npm run dev\ \npm run electron\,electron:build: vite build electron-builder
}修改后的内容如下 4.4 打包中的报错处理
npm run electron:build
出现这个报错别慌
Package “electron” is only allowed in “devDependencies”. Please remove it from the “dependencies” section in your package.json.
把dependencies中的electron删掉就可以了 不出意外打包的时候又要报错了
cannot resolve xxx/30.0.9/electron-v30.0.9-win32-ia32.zip
简单粗暴的办法就是手动下载
截止到2024-06-05淘宝镜像源资源地址为CNPM Binaries Mirror
打开后找到搜索electron点击进入资源列表找到版本30.0.9继续点击进入找到对应的版本点击下载下载成功后放进本地资源包地址C:\Users\Administrator\AppData\Local\electron\Cache 如果其他依赖下载失败,可以参考这篇:
解决electron-builder打包时下载依赖慢的问题 | 梓喵出没 (azimiao.com)
4.5打包完成
打包完成后会生成dist和dist_electron双击dist_electron中的exe文件按照导引进行安装就可以运行啦
