使用elecron-builder打包生成桌面程序https://mp.csdn.net/mp_blog/creation/editor?not_checkout=1
描述:
原本项目做的B端,现在换成C端,直接vue+electron把B端项目转换成C端,这是根据官网的教程来打包创建桌面程序,要先下载node和git哦。
好了,开始跟着教程一步步的创建属于你的第一个桌面程序吧
一、运行electron
1、安装electron、热更新
npm install --save-dev electron
npm install nodemon -D
2、创建electron.js
// 生成electron桌面程序
// 解构使用
const { app, BrowserWindow } = require("electron")
//获取地址
const path = require('node:path')
// 创建一个BrowserWindow
const createWindow = () => {
const win = new BrowserWindow({
width: 1000,
height: 800,
})
// 打开内部页面,随意创建一个文件,进行拼接地址
win.loadFile(path.join(__dirname, "./a.html"))
// 打开F12调式窗口
win.webContents.openDevTools()
}
//运行createWindow方法
app.whenReady().then(() => {
createWindow()
})
3、在package.json修改配置
{
"name": "vue3_cli_default",
"version": "0.0.0",
"description": "Hello World!",
"main": "yourself.js",
"author": "Jane Doe",
"scripts": {
"dev": " nodemon --exec electron .",
"start": "vite"
"build": "vite build",
"serve": "vite preview"
}
}
4、安全策略 导致报错
走完上面几步,尝试运行npm run dev,结果打开了,但是报错了
这是因为安全策略导致的。把webSecurity设置成false就好了,就不会报错了
const win = new BrowserWindow({
width: 1000,
height: 800,
//渲染层级使用require(require是node使用)
webPreferences: {
// 开始使用node
nodeIntegration: true,
// 不开启上下隔离(如果想使用require就要这个关闭)
contextIsolation: false,
// 关闭web安全策略,允许加载本地资源
webSecurity: false,
}
})
5、成功打开electron
运行之后,出现了!!!
二、vue+electron 运行项目
现在我们开始把vue项目和electron结合生成吧。
首先我们先运行起来本地的项目:npm start ,先运行本地的项目
接着在electron.js改变的就是不打开内部页面了,而是打开本地链接。
// 打开链接
win.loadURL("http://localhost:3000")
然后在打开一个终端,运行npm run dev ,查看是否成功运行了
成功的运行了,但是每次运行都要执行两次命令,感觉好麻烦啊,能不能使用一个命令就可以成功运行起来呢?那就使用第三种方法。
使用concurrently 启动我们的electron
npm install concurrently
接着package.json 中修改配置
"scripts": {
"dev": "concurrently vite \"nodemon --exec electron .\"",
"build": "vite build",
"serve": "vite preview",
},
那我们尝试把其中一个终端关闭,重新运行npm run dev,是可以成功的展示的。
三、打包
1、安装Electron Forge 的 CLI 工具包
npm install --save-dev @electron-forge/cli
2、使用现成的转化脚本将项目导入至 Electron Forge。
npx electron-forge import
但是我使用命令后发现报错了,这是由于没有安装electron-squirrel-startup导致的。
3、安装electron-squirrel-startup
安装后,我们再次运行npx electron-forge import尝试一下,还是不行,我尝试用pnpm也不行,那就直接删除node_modules包,运行npm install ,再次尝试还是不行,那就放弃吧。
如果运行成功了直接就进入下一步。
如果没有自动生成的,现在改成手动添加吧。
4、手动添加依赖
npm install --save-dev @electron-forge/maker-squirrel
npm install --save-dev @electron-forge/maker-deb
npm install --save-dev @electron-forge/maker-rpm
npm install --save-dev @electron-forge/maker-zip
npm install --save-dev @electron-forge/maker-dmg
5、手动添加forge.config.js
const { FusesPlugin } = require('@electron-forge/plugin-fuses')
const { FuseV1Options, FuseVersion } = require('@electron/fuses')
module.exports = {
packagerConfig: {
asar: true,
},
rebuildConfig: {},
makers: [
{
name: '@electron-forge/maker-squirrel',
config: {
certificateFile: './cert.pfx',
certificatePassword: process.env.CERTIFICATE_PASSWORD
},
},
{
name: '@electron-forge/maker-zip',
platforms: ['darwin'],
},
{
name: '@electron-forge/maker-deb',
config: {},
},
{
name: '@electron-forge/maker-rpm',
config: {},
},
],
plugins: [
{
name: '@electron-forge/plugin-auto-unpack-natives',
config: {},
},
// Fuses are used to enable/disable various Electron functionality
// at package time, before code signing the application
new FusesPlugin({
version: FuseVersion.V1,
[FuseV1Options.RunAsNode]: false,
[FuseV1Options.EnableCookieEncryption]: true,
[FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
[FuseV1Options.EnableNodeCliInspectArguments]: false,
[FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
[FuseV1Options.OnlyLoadAppFromAsar]: true,
}),
],
}
直接运行 npm run make,等待出现out文件后就算是成功了,但是目前是本地的项目,还有一点小小的bug,后续再改。
打开out文件找到定义名字的文件夹,进入到文件夹内
找到定义名字的exe双击,就可以看到啦!