前端打包成EXE文件
业务需要哈,让把原生打包成exe文件运行,我这里的代码用的是原生的,也就是js jq打包的
要将基于 HTML、CSS、JavaScript 和 jQuery 的项目打包成一个可执行的 .exe 文件,可以使用 Electron 框架。Electron 允许使用 Web 技术构建跨平台的桌面应用程序。下面是将您现有的项目打包成 exe 文件的步骤:
第一步:首先,确保已经安装了 Node.js。然后,在项目根目录下运行以下命令,以初始化
npm init 按照提示输入相关信息,或直接按 Enter 使用默认值。这将在项目根目录中创建一个 package.json 文件。
复制
第二步:使用以下命令安装 Electron 依赖:
npm install electron --save-dev
复制
第三步:在项目根目录中创建一个名为 main.js 的文件,作为 Electron 应用程序的入口文件,然后在其中添加以下代码:(复制即可)
const { app, BrowserWindow } = require('electron'); const path = require('path'); const url = require('url'); function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, }, }); const indexPath = url.format({ pathname: path.join(__dirname, 'index.html'), protocol: 'file:', slashes: true, }); win.loadURL(indexPath); } app.whenReady().then(createWindow); app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow(); } }); // 这个文件将创建一个 Electron 窗口并加载您的项目的 index.html 文件。
复制
第四步:在 package.json 文件中,将 main 属性更改为 "main": "main.js",然后在 scripts 属性中添加一个新的 start 脚本,如下所示:
{ "name": "jiujinji", "version": "1.0.0", "description": "", "main": "main.js", //这里 "scripts": { "start": "electron .", // 这里 "test": "echo \"Error: no test specified\" && exit 1", }, "author": "", "license": "ISC", "devDependencies": { "electron": "^24.1.2", } } //使用以下命令运行 Electron 应用程序并确保一切正常:npm start //此命令将启动 Electron 应用程序,您应该能够看到您的项目在新窗口中运行。
复制
第五步:接下来,安装 Electron Builder,用于将项目打包成可执行文件:
npm install electron-builder --save-dev
复制
在 package.json 文件中添加 build 配置和 dist 脚本,如下所示:
{ "name": "jiujinji", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "start": "electron .", "test": "echo \"Error: no test specified\" && exit 1", "dist": "electron-builder" // 这里 }, "author": "", "license": "ISC", "devDependencies": { "electron": "^24.1.2", "electron-builder": "^23.6.0" }, "build": { // 这里 "appId": "com.example.your-app", "win": { "target": "nsis" }, "nsis": { "oneClick": false, "allowToChangeInstallationDirectory": true } } }
复制
这里,我们为 Electron Builder 添加了一个名为 dist 的新脚本,以及一些构建选项。请注意,我们在 build 配置中设置了目标平台为 Windows(win)并指定了 nsis 作为打包格式。nsis 配置选项允许用户在安装过程中选择安装目录。
最后,运行以下命令以生成 exe 文件:
npm run dist
复制
请注意,这个示例假设你的项目是针对 Windows 平台的。如果需要为其他平台(如 macOS 或 Linux)构建应用程序,需要在 build 配置中添加相应的平台和目标选项。有关 Electron Builder 的更多配置选项,请参阅 官方文档。https://www.electron.build/configuration/configuration