前端打包成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 配置设置目标平台为 Windowswin)并指定了 nsis 作为打包格式。nsis 配置选项允许用户安装过程选择安装目录

最后,运行以下命令以生成 exe 文件:

npm run dist

注意这个示例假设你的项目是针对 Windows 平台的。如果需要为其他平台(如 macOS 或 Linux构建应用程序需要build 配置添加相应的平台目标选项。有关 Electron Builder 的更多配置选项,请参阅 官方文档https://www.electron.build/configuration/configuration

原文地址:https://blog.csdn.net/weixin_56718509/article/details/130378566

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_48986.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注