在本教程中，我们将学习如何将Nuxt.js项目打包成一个exe文件。这样，我们就可以把自己的Nuxt应用程序分发给Windows用户，让他们可以直接在本地电脑上运行。
## 主要步骤：
1. 准备Nuxt.js项目
2. 使用Electron将Nuxt项目打包成桌面应用程序
3. 打包Electron应用程序为exe文件
4. 测试和分发exe文件
### 步骤1：准备Nuxt.js项目
首先，我们需要有一个完整的Nuxt.js项目。为了简化示例，我们将创建一个新的Nuxt项目。在终端中运行以下命令：
```bash
npx create-nuxt-app my-nuxt-app
cd my-nuxt-app
npm install
npm run dev
```
这将创建一个名为`my-nuxt-app`的新Nuxt项目并运行至开发环境。可以在浏览器上访问http://localhost:3000 查看页面。
### 步骤2：使用Electron将Nuxt项目打包成桌面应用程序
接下来，我们将使用Electron将Nuxt项目转换为桌面应用程序。首先，安装Electron:
```bash
npm install electron --save-dev
```
然后，在项目根目录下创建一个名为`main.js`的文件。这将是我们的Electron主进程文件：
```js
const { app, BrowserWindow } = require('electron')
const isDev = require('electron-is-dev')
const path = require('path')
// 创建窗口
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
icon: path.join(__dirname, 'static/icon.png'),
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
},
})
const serverUrl = isDev
? 'http://localhost:3000'
: `file://${path.join(__dirname, 'dist/index.html')}`
win.loadURL(serverUrl)
}
app.whenReady().then(createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
```
在`package.json`中，添加以下两个脚本，以方便在Electron中运行和构建Nuxt应用程序：
```json
{
"scripts": {
"electron": "electron .",
"build:electron": "nuxt build && nuxt export && npm run electron"
}
}
```
下一步，启动Nuxt.js开发服务器：
```bash
npm run dev
```
然后，在另一个终端窗口中运行 `npm run electron`，这会打开一个 Electron窗口来运行我们的 Nuxt应用程序。
### 步骤3：打包Electron应用程序为exe文件
为了将Electron应用程序打包为exe文件，我们需要使用Electron-Builder。首先安装：
```bash
npm install electron-builder --save-dev
```
接着在`package.json`中添加配置以及运行脚本（注意：appName请根据自己需求命名）：
```json
{
"scripts": {
"dist": "nuxt build && nuxt export && electron-builder --windows --x64"
},
"build": {
"appId": "com.example.my-nuxt-app",
"productName": "My Nuxt App",
"directories": {
"output": "build"
},
"files": [
"dist/**/*",
"node_modules/**/*",
"main.js"
],
"win": {
"target": [
{
"target": "nsis",
"arch": [
"x64",
"ia32"
]
}
]
},
"nsis": {
"oneClick": false,
"allowElevation": true,
"allowToChangeInstallationDirectory": true,
"installerIcon": "static/icon.ico",
"uninstallerIcon": "static/icon.ico",
"installerHeaderIcon": "static/icon.ico",
"createDesktopShortcut": true,
"createStartMenuShortcut": true,
"shortcutName": "My Nuxt App"
},
"extraFiles": [
{
"from": "static",
"to": "build/resources",
"filter": [
"icon.png"
]
}
]
}
}
```
现在我们已经配置好Electron-Builder，使用以下命令开始打包生成exe文件：
```bash
npm run dist
```
这将在`build`文件夹下面生成一个exe文件（如：`My Nuxt App Setup 0.1.0.exe`）。
### 步骤4：测试和分发exe文件
双击`build`文件夹中生成的exe文件，进行安装。安装完成后，会在用户的桌面和开始菜单中创建一个新的应用程序图标。点击图标即可启动已打包的Nuxt应用程序。
至此，我们已经成功实现了将Nuxt.js项目打包成一个exe文件。可以将生成的exe文件分发给其他Windows用户，让他们直接在本地电脑上运行我们的Nuxt应用程序。
