前端项目打包exe流程

本文章将使用electron和NW.js两个工具介绍如何将前端项目打包成exe程序。

一、使用electron框架

1. 安装依赖

js 复制代码
npm i electron-builder --save-dev

2. 添加 scripts内容 到 package.json 中

js 复制代码
 "electron:serve": "electron .",
 "electron:build": "electron-builder",

3. 创建项目的入口文件main.js

放到项目的根目录下:

js 复制代码
const { app, BrowserWindow } = require('electron');
const path = require('path');
let mainWindow;
function createWindow() {
  mainWindow = new BrowserWindow({
    width: '',
    height: 600,
    webPreferences: {
      nodeIntegration: true, // 允许在Electron中使用Node.js API
    },
  });
  // 加载Vue应用的打包文件
  mainWindow.loadFile(path.join(__dirname, 'dist', 'index.html'));
  mainWindow.maximize()
  mainWindow.show()
  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});

4. 添加 build 到 package.json 中

js 复制代码
"build": {
    "asar":true,//使用asar打包体积小
    "productName": "knowledgeGraph-dd",//打包完成的包名
    "appId": "com.example.knowledgeGraph-dd",//项目包唯一标识
    "directories": {//输出包名(项目包在此包中,包中还有其他文件,例如安装包)
      "output": "out"
    },
     // windows相关的配置
    "win": {  
      "icon": "xxx/icon.ico"//图标路径 
    },
    "dmg": { // MacOSdmg
    "contents": [
      ...
    ]},
    "mac": {// mac
      "icon": "build/icons/icon.icns"
    },
    "linux": { // linux
      "icon": "build/icons"
    },
    "nsis": {
      "oneClick": false, // 是否一键安装
      "allowElevation": true, // 允许请求提升。 如果为false,则用户必须使用提升的权限重新启动安装程序。
      "allowToChangeInstallationDirectory": true, // 允许修改安装目录
      "installerIcon": "./build/icons/aaa.ico",// 安装图标
      "uninstallerIcon": "./build/icons/bbb.ico",//卸载图标
      "installerHeaderIcon": "./build/icons/aaa.ico", // 安装时头部图标
      "createDesktopShortcut": true, // 创建桌面图标
      "createStartMenuShortcut": true,// 创建开始菜单图标
      "shortcutName": "xxxx", // 图标名称
      "include": "build/script/installer.nsh", // 包含的自定义nsis脚本 这个对于构建需求严格得安装过程相当有用。
    }, 
    "files": [//设置我们要打包的文件
      "dist",
      "main.js"
    ]
},

5. 执行打包命令

js 复制代码
npm run electron:build

6.生成out文件包

二、使用NW.js

1.先去 registry.npmmirror.com/binary.html...下载nw.js,进去之后,点击下载SDK的版本,并解压至本地目录即可。

2. 在vue项目中执行npm run build 打包项目,并放在nw.exe的同级目录下

3. 在打包完成的目录中新建package.json文件,指定应用的名称和应用的入口文件

js 复制代码
{
  "name": "knowledgegraph-dd",
  "main": "index.html"
}

4.试运行

1.直接将knowledgegraph-dd文件夹拖入nw.exe文件内,看能否正常运行vue项目。

2.压缩knowledgegraph-dd文件成zip格式,并放置到nw.exe文件同级目录下,将knowledgegraph-dd.zip拖入nw.exe文件内,看能否正常运行vue项目

5.打包

1. 将knowledgegraph-dd.zip文件后缀改成nw。

2. 将合并knowledgegraph-dd.nw和nw.exe。 执行命令 copy /b nw.exe+knowledgegraph-dd.nw

6.点击knowledgegraph-dd.exe运行。 注:上一步操作打包出来的exe应用,只能本地访问,换个电脑就无法启动了。所以要进行进一步打包

7. 使用Enigma Virtual Box打包成exe (Enigma Virtual Box网上下载)

1.

2. 点击process后点击run运行即可

3. 最终打包文件

相关推荐
一斤代码5 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子5 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年5 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说7 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409197 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding7 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜7 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui