vue+electron打包桌面应用

<>vue项目使用electron打包成exe文件

需求：需要把vue项目打包生成桌面应用，点击桌面图标进入程序，不需要在浏览器输入地址。而且在没有网络的情况下也能正常使用。

<>效果图

图片:

首先你需要一个完整的vue项目，执行打包命令npm run build。然后你的文件夹中有个dist文件夹，在终端cd dist进入dist文件夹

<>下载electron

在dist文件夹下执行命令npm install electron 代码片.
npm install electron;
<>在dist文件夹下创建main.js和package.json

main.js
const {app, BrowserWindow} =require('electron');//引入electron let win; let
mainWindow; let windowConfig = { width:800,//创建窗口的宽度 height:600,//窗口高度
webPreferences: {//解决跨域问题 webSecurity: false } };//窗口配置程序运行窗口的大小 function
createWindow(){ win = new BrowserWindow(windowConfig);//创建一个窗口 win.loadURL(
`file://${__dirname}/index.html`);//在窗口内要展示的内容index.html 就是打包生成的index.html win.
webContents.openDevTools(); //开启调试工具 win.on('close',() => { //回收BrowserWindow对象
win= null; }); win.on('resize',() => { win.reload(); }) } app.on('ready',
createWindow); app.on('window-all-closed',() => { app.quit(); }); app.on(
'activate',() => { if(win == null){ createWindow(); } });
package.json
{ "name": "dist", "version": "1.0.1", "description": "", "main": "main.js",
"build": { "appId": "com.leon.HelloWorld02", "copyright": "LEON", "productName":
"管理系统", "dmg": { "background": "res/background.png", "window": { "x": 100, "y":
100, "width": 500, "height": 300 } }, "win": { "icon": "res/icon.ico" } },
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start":
"electron .", "pack": "electron-builder --dir", "dist": "electron-builder" },
"author": "", "license": "ISC", "dependencies": {}, "devDependencies": {
"electron": "7.1.2", "electron-builder": "^22.8.0", "electron-package": "^0.1.0"
} }
<>执行命令npm run start，如果项目运行起来了说明electron安装成功

然后再执行命令 npm install electron-builder和 npm install electron-package

<>这样就可以看到dist文件夹里多了个dist 文件夹，里面的exe文件就是我们需要的。

注意：最好再vue项目打好包后点击index.html看能不能跑起来，跑不起来需要做其他配置，不能直接用这方法打包。

• « 上一篇：Linux自主访问控制——有效ID与真实ID
• » 下一篇：GO操作Mysql数据库