使用electron打包前端代码安装包

 

项目的构建这里就不讲了，我的项目是使用vuecli创建的，node.js也是需要的

一、npm安装

npm install electron -g

npm install -g electron-prebuilt

npm install -g electron-packager

package.json 

{
  "name": "wisdom",
  "version": "0.1.0"
  "main": "src/index.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "electron": "^7.0.0"
  }

main对应调用electron代码放置的位置，

start是npm start 运行electron，打开窗口

"electron": "^7.0.0"是electron的版本

二、创建main文件

接下来根据main的路径创建对应的文件，用来调用electron并实现功能

const { app, BrowserWindow, Menu, ipcMain, shell } = require('electron')
let path = require('path');
let exePath = path.dirname(app.getPath('exe'));

// 保持对window对象的全局引用，如果不这么做的话，当JavaScript对象被
// 垃圾回收的时候，window对象将会自动的关闭
let win

function createWindow () {
  Menu.setApplicationMenu(null)
  // 创建浏览器窗口。
  win = new BrowserWindow({
    width: 1920,
    height: 1080,
    webPreferences: {
      nodeIntegration: true
    },
    // frame: false
  })

  // 加载index.html文件
  win.loadFile('dist/index.html')

  // 打开开发者工具
  // win.webContents.openDevTools()

  // 当 window 被关闭，这个事件会被触发。
  win.on('closed', () => {
    // 取消引用 window 对象，如果你的应用支持多窗口的话，
    // 通常会把多个 window 对象存放在一个数组里面，
    // 与此同时，你应该删除相应的元素。
    win = null
  })
}

// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow)

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // 在macOS上，当单击dock图标并且没有其他窗口打开时，
  // 通常在应用程序中重新创建一个窗口。
  if (win === null) {
    createWindow()
  }
})

// 在这个文件中，你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件，然后用 require 导入。

// 异步消息
ipcMain.on('open', () => {
  shell.openItem(exePath + '\\djj\\tsd.exe')

})

• 这里的index指向是build后的index.html文件
• shell是命令行方法，这里想要实现的是调用本地的文件
• \需要使用\转译

这里放上electron的文档地址https://electronjs.org/docs

接下来运行npm start就可以运行了

三、打包

electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64 --version=0.0.1

大概格式是这样的：

electron-packager <应用目录> <应用名称> <打包平台> --out <输出目录> <架构> <应用版本>

还可以添加icon

electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64 --version=1.0.0 --electron-version=1.4.13 --icon=./app/img/icon.ico

但是这里会报错，下面贴一下我的实现方法

electron-packager . wisdom --win --out ../wisdom --arch=x64 --icon=./dist/XXn.ico

之后就可以在输出目录中找到打好的包了。

四、生成exe安装包

• 使用NSIS软件：https://pan.baidu.com/s/1mitSQU0
• 安装asar

npm install -g asar

npm之后接着输入

asar pack ./index.html app.asar

生成asar包

之后将 .asar 移至之前打包生成的文件的resources文件夹下

打开nsis软件

 

导入需要放在安装包中的文件

（其他步骤按照要求填写，这里就不展开讲了）

脚本创建成功之后点击运行

完成之后，就可以看到你的安装包啦！

原文地址：https://cloud.tencent.com/developer/article/1493345

 

接下来讲讲我遇到的问题：

• 报错fs.existsSync is not a function

这里需要将调用require('electron')的方法改为window.require('electron')就可以解决

• 生成安装包的时候报错win32 error code 740

在运行VNISEdit 编译环境的时候，使用管理员权限打开

• 修改代码之后run start没发生变化

需要先build一下，在npm start就可以看到变化了