使用electron将前端项目打包成pc端应用

1. 安装node

作为一个前端应该都知道node，这里久不介绍了

2. 全局安装electron

这里使用的是npm的方式安装

# 全局安装 electron
npm install -g electron

3. 创建我们的项目文件

这里我们创建一个空的demo文件夹

4. 初始化npm

npm init -y

5. 安装Electron

这一步可能会非常慢，可能会失败，推荐大家使用cnpm安装,如果安装失败可以将整个文件夹删掉重新操作一遍

# 开发环境安装 Electron
npm install electron --save-dev

# 检查安装,低版本node不支持
npmx electron -v

6. 创建入口文件

创建一个index.html文件和index.js文件，这里要注意，js文件的文件名要和package.json文件下的文件名一致,如下图：

7. 添加index.js中的代码

var electron = require('electron');

var app = electron.app;

// 窗口对象
var BrowserWindow = electron.BrowserWindow;

// 声明打开的主窗口
var mainWindow = null;

// 主进程
app.on("ready", ()=> {
  mainWindow = new BrowserWindow({
    width: 1200,
    height:800,

    // 使用nodeapi
    webPreferences: {
      nodeIntegration: true
    }
  })
  mainWindow.loadFile('/index.html');

  // 监听关闭窗口
  mainWindow.on("closed", ()=> {
    mainWindow = null
  })
})

这里如果我们要使用线上域名的话把mainWindow.loadFile('/index.html');改成mainWindow.loadURL('http://www.xxx.cn');就可以了

8. 运行

electron .

看看效果：

9. 调试

直接上图

10. 打包发布

# 安装打包工具
npm install --save-dev @electron-forge/cli
npx electron-forge import

# 打包
npm run make

到这里我们的应用就打包完成了，有问题欢迎大家留言哦