vue项目中 electron基本使用

Electron是一个可以使用前端技术开发一个跨平台桌面应用的框架，简言之就是 一个框架 使用它可以生成桌面应用

1、使用vue脚手架生成vue项目

vue init webpack test_electron
一系列选择后生成项目

2、将vue项目打包

npm run build
此时会生成dist目录
打包前需要将资源文件路径改为相对路径 此处使用脚手架2 所以在config/build/index.js build{} 中更改assetsPublicPath: “./”

3、在项目dist目录下开始将打包好的vue项目生成桌面应用

a、下载electron

  全局下载 sudo npm install electron -g
  查看下载的electron版本  electron -v 

b、在dist目录下新建文件main.js 和 package.json

const {app, BrowserWindow} =require('electron');//引入electron
let win;
let windowConfig = {
  width:800,
  height:600
};//窗口配置程序运行窗口的大小
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": "test",
    "productName": "test-electron",
    "author": "jn",
    "version": "1.1.1",
    "main": "main.js",
    "description": "desc",
    "scripts": {
        "distMac": "electron-builder --mac --x64",
        "distWin": "electron-builder --win --x64",
        "postinstall": "electron-builder install-app-deps",
        "dist": "npm run distWin && npm run distMac"
    },
    "build": {
        "electronVersion": "1.8.4",
        "mac": {
            "target": [
                "dmg",
                "zip"
            ]
        },
        "win": {
            "requestedExecutionLevel": "highestAvailable",
            "target": [{
                "target": "nsis",
                "arch": [
                    "x64"
                ]
            }]
        },
        "appId": "demo",
        "artifactName": "demo-${version}-${arch}.${ext}",
        "nsis": {
            "artifactName": "demo-${version}-${arch}.${ext}"
        },
        "extraResources": [{
            "from": "./static/xxxx/",
            "to": "app-server",
            "filter": [
                "**/*"
            ]
        }],
        "publish": [{
            "provider": "generic",
            "url": "http://xxxxx/download/"
        }]
    },
    "dependencies": {
        "core-js": "^2.4.1",
        "electron-packager": "^12.1.0"
    },
    "devDependencied": {
        "electron-builder": "^22.9.1",
        "electron-updater": "^2.22.1"
    }
}

package.json更多配置可查看官方文档：https://www.electron.build/configuration/configuration

c、使用electron测试

控制台输入electron .
此时如果正常显示 表示成功 接下来只需要将其生成软件包

4、全局下载electron-builder

sudo npm install electron-builder -g
sudo npm install electron-package -g

5、执行打包命令

electron-builder
此时生成exe包

只是描述基本简单使用 需要生成mac下的包 需要额外配置
需了解更多 请自行百度