如何用electron把vue项目打包为桌面应用exe文件

下面是如何用electron把vue项目打包为桌面应用exe文件的完整攻略。

1. 安装electron

首先，需要在项目中安装electron。使用npm安装即可：

npm install electron --save-dev

2. 修改package.json

接下来，在项目的package.json文件中添加以下内容：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  },
  "build": {
    "appId": "com.example.my-electron-app",
    "productName": "My Electron App",
    "win": {
      "icon": "build/icon.ico"
    }
  },
  "dependencies": {
    "electron-is-dev": "^1.1.0"
  }
}

其中，main字段表示electron主进程的入口文件，这里设为main.js；scripts字段中的start命令表示启动electron应用，build命令表示打包应用；build字段中的appId表示应用的唯一标识，productName表示应用的名称，win中的icon表示应用的图标路径；dependencies中的electron-is-dev是一个用于判断electron应用的开发或生产环境的工具库。

3. 编写electron主进程文件

然后，在项目根目录下创建main.js文件，编写electron主进程的代码：

const { app, BrowserWindow } = require('electron')
const path = require('path')
const isDev = require('electron-is-dev')

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadURL(isDev ? 'http://localhost:8080' : `file://${path.join(__dirname, '../dist/index.html')}`)

  if (isDev) {
    win.webContents.openDevTools()
  }
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

上面的代码中，createWindow函数用于创建浏览器窗口，设置窗口的大小和加载的URL。如果是开发环境，会自动打开开发者工具；app.whenReady()表示应用已经准备好，然后调用createWindow函数创建浏览器窗口；app.on('activate')表示当没有浏览器窗口时，点击应用图标时需要重新创建浏览器窗口；app.on('window-all-closed')表示所有的浏览器窗口关闭后退出应用。

4. 编写preload.js文件

接下来，在项目根目录下创建preload.js文件，用于BrowserWindow中的webPreferences选项：

window.electron = require('electron')

5. 打包应用

最后，运行以下命令进行打包：

npm run build

如果打包过程中出现问题或异常，可以执行以下命令进行清理：

npm run clean

打包完成后，会在项目根目录下生成dist目录，其中包含打包后的应用文件。

示例演示：

以下示例演示了如何使用electron打包vue项目“Hello World”为桌面应用：

1. 创建一个vue-cli项目：

vue create my-electron-app

1. 修改package.json文件如上所述。

2. 安装electron-builder插件：

npm install electron-builder --save-dev

1. 创建electron主进程文件main.js和preload文件preload.js如上所述。

2. 运行以下命令进行打包：

npm run build

等待打包完成后，在项目根目录下会生成dist目录，其中包含可执行文件"go.sh"和"my_electron_app-1.0.0.exe"。

1. 运行"go.sh"文件或"my_electron_app-1.0.0.exe"文件即可启动应用。

以上是如何用electron把vue项目打包为桌面应用exe文件的完整攻略。