vue|vue + Electron 制作桌面应用的示例代码 vue+Electron制作桌面应用的示例

1.vue打包这里使用vue原生打包命令，对vue项目进行打包

npm run build

2.配置 Electron 使用 Electron 制作桌面应用需要两个配置文件 1.package.json 创建一个package.json文件，将以下代码放入

{"name": "demo", //项目名称"productName": "demo","author": "作者","version": "1.0.4","main": "main.js","description": "项目描述","scripts": {"start": "electron .", //启动electron项目"pack": "electron-builder --dir","dist": "electron-builder","postinstall": "electron-builder install-app-deps", "packager": "electron-packager . myClient --win --out ../myClient --arch=x64 --app-version=0.0.1 --electron-version=2.0.0" //将项目打包为exe文件},"build": {"electronVersion": "2.0.18","win": {"requestedExecutionLevel": "highestAvailable","target": [{"target": "nsis","arch": ["x64"]}]},"appId": "demo","artifactName": "demo-${version}-${arch}.${ext}","nsis": {"artifactName": "demo-${version}-${arch}.${ext}"}},"dependencies": {"core-js": "^2.4.1","electron-updater": "^2.22.1"},"devDependencies": {"electron-packager": "^12.1.0","electron-builder": "^20.19.2"}}

2.mian.js
创建main.js 将以下代码放入
【注】win.webContents.openDevTools(); 这句代码的意思是开启调试窗口，生成exe文件时需要注释掉

onst {app, BrowserWindow} =require('electron'); //引入electronlet win; const path = require('path')let windowConfig = {width:800,height:600,webPreferences:{preload: path.resolve(__dirname, 'electron-preload.js')}}; //窗口配置程序运行窗口的大小function createWindow(){win = new BrowserWindow(windowConfig); //创建一个窗口win.loadURL(`file://${__dirname}/index.html`); //在窗口内要展示的内容index.html 就是打包生成的index.htmlwin.webContents.openDevTools(); //开启调试工具win.on('close',() => {//回收BrowserWindow对象win = null; }); win.on('resize',() => {win.reload(); })}app.on('ready',createWindow); app.on('loaded',()=>{console.log("aaa")}); app.on('window-all-closed',() => {app.quit(); }); app.on('activate',() => {if(win == null){createWindow(); }}); const { ipcMain } = require('electron')ipcMain.on("ping",function(even,arg){console.log(arg)even.returnValue = "https://www.it610.com/article/pong"})

3.将package.json文件和main.js文件放入到 vue打包完成的dist目录下