vue封装exe
```
my-vue-app 是你的项目名。你可以根据需要更改它。项目创建完后，进入项目文件夹：
```bash
cd my-vue-app
```
```bash
npm install electron electron-builder --save-dev
```
这将安装 Electron.js 及其构建工具。
4. 创建主进程文件：
在项目文件夹下创建一个名为 “electron.js”的文件。这将是您的 Electron 主进程文件。np用以下命令创建：
```bash
touch electron.js
```
在刚刚创建的 electron.js 文件中，输入以下代码：
```javascript
const { app, BrowserWindow } = require('electron');
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
WebPreferences: {
nodeIntegration: true,
},
});
win.loadURL(`file://${__dirname}/dist/index.html`);
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.plaTForm !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.GETAllWindows().length === 0) {
createWindow();
}
});
```
5. 修改 package.json 文件：
将以下代码添加到 package.json 文件中的 "scripts" 部分：
```json
"electron": "electron .",
"electron-build": "electron-builder"
```
现在你的 "scripts" 部分看起来应该是这样子：
```json
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"electron": "electron .",
"electron-build": "electron-builder"
}
```
6. 测试：
运行以下两个命令分别构建 Vue 项目并启动 Electron 应用来尝试一下。
```bash
npm run build
npm run electron
```
如果一切顺利，您的 Vue.js 应用现在将以桌面应用程序的形式运行。
7. 构建 exe 文件：
为了构建 exe 文件，您需要运行以下命令：
```bash
npm run electron-build
```
构建完成后，会生成一个名为“dist”文件夹，里面包含了适用于 Windows 的可执行文件(.exe)。
8. 结论：
通过这个教程，你学会了如何利用 Vue.js 和 Electron.js 封装一个简单的 Windows 可执行文件（exe）。现在您可以通过 Vue.js 构建精美的界面，并将其封装成桌面应用程序。不仅限于 Windows，您还可以为 macOS 和 Linux 创建桌面应用程序。尝试实验不同的功能，构建一个功能丰富的应用程序，以满足用户需求。
扫描二维码推送至手机访问。
版权声明：本文由网站APP-h5开发APP-跨平台开发工具发布，如需转载请注明出处。