Vue3 打包成 EXE 文件（原理及详细介绍）
Vue3 是一个用于构建用户界面的渐进式框架，在web开发领域具有广泛的应用性。然而，有些开发者可能希望将 Vue3 应用打包为一个独立的可执行文件（EXE），这样可以更方便地进行本地或者桌面应用的编写和分发。本教程将原理及详细步骤介绍如何将 Vue3 项目打包成EXE文件。
原理：
将 Vue3 项目打包成EXE文件需要借助于 Electron 这个框架。Electron 是由Github开发，旨在使开发者使用 HTML, CSS, JavaScript 等 web 技术开发跨平台原生应用的工具。它通过将 Chromium 和 Node.js 进行集成，帮助实现桌面端应用的开发与分发。
详细步骤如下：
1. 创建一个 Vue3 项目
首先，确保已经安装了 Node.js，并使用以下命令来全局安装 Vue CLI：
```
npm install -g @vue/cli
```
根据提示完成 Vue CLI 的安装。
然后，通过以下命令创建一个新的 Vue3 项目：
```
vue create my-vue3-electron-app
```
进入项目目录：
```
cd my-vue3-electron-app
```
2. 安装 Electron
使用 NPM 安装 electron 和 electron-builder 作为项目的开发依赖：
```
npm install electron electron-builder --save-dev
```
3. 创建 Electron 启动文件
在 Vue3 项目根目录下，创建一个名为 “electron.js” 的文件，并添加以下代码：
```js
const { app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
win.loadURL('http://localhost:8080/')
}
app.whenReady().then(createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
```
4. 配置项目脚本
在 package.json 文件中的 "scripts" 添加如下脚本：
```json
"scripts": {
...
"electron:serve": "vue-cli-service serve && electron ./electron.js",
"electron:build": "vue-cli-service build && electron-builder"
},
```
然后，还需要在 package.json 文件中的 "build" 添加配置（其中 appId, productName,build之类，可以根据实际需求自定义）：
```json
"build": {
"appId": "com.example.vue3-electron-app",
"productName": "MyVue3ElectronApp",
"files": [
"dist/**/*",
"electron.js"
],
"directories": {
"buildResources": "build"
},
"win": {
"icon": "build/icon.ico",
"target": "nsis"
}
}
```
5. 测试与打包
首先，在 Terminal 中运行以下命令测试 Electron 应用：
```
npm run electron:serve
```
如果一切配置正确，此时会看到运行起来的桌面应用。
当你准备好项目发布时，运行以下命令即可将 Vue3 项目打包成EXE文件：
```
npm run electron:build
```
打包完成后，会在项目的 dist_electron 文件夹下生成 EXE 文件。用户可以直接运行或将其分发给其他用户。
总结：
通过以上步骤和基础配置，我们实现了将 Vue3 项目打包成一个独立的EXE文件。这使得 Vue3 不仅仅是 Web 端的框架，也可以扩展到桌面端应用。需要注意的是，根据实际需求，还需要对 Electron 和 Vue3 进行更详细的配置。这些可以参考 Electron 和 Vue3 的官方文档来获取更多信息。
