本文共 2686 字，大约阅读时间需要 8 分钟。

如何将Vue项目转换为Electron桌面应用？这对于刚接触Electron的大多数开发者来说，无疑是一个充满挑战却又充满回报的任务。在这个过程中，你可能会遇到许多意想不到的问题，我将基于自己对这些问题的解决实践，分享一个完整的开发流程。

一、安装开发环境

首先，需要 installations of Electron及其辅助工具。如果你还没有安装Electron和electron-packager，可以运行以下命令：

npm install electron --save-dev
npm install electron-packager --save-dev

确认安装完成，可以通过运行以下命令查看版本号：

electron-packager -v && electron-packager ./ --version

安装完成后，Electron开发环境已经准备就绪，接下来可以开始下载项目源代码。

二、获取或创建项目源代码

克隆官方示例项目：

git clone https://github.com/electron/electron-quick-start

在项目根目录下，新建一个main.js文件，将以下代码粘贴到其中：

//Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  // 和加载应用的主页
  mainWindow.loadFile('../dist/index.html')
  // 打开开发者工具
  mainWindow.webContents.openDevTools()
}
// 当Electron初始化完成后 readiness检查
app.whenReady().then(() => {
  createWindow()
  // macOS情况下，重建窗口
  app.on('activate', function() {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})
// 当所有窗口关闭时退出应用（除了macOS）
app.on('window-all-closed', function() {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

三、配置包 ModelRenderer

在项目根目录下的package.json文件，添加两个操作命令：

{
  "electron": "npm run build && electron build/electron.js",
  "packager": "electron-packager ./dist --platform=win32 --arch=x64 --out ./OutApp --electron-version 6.0.5 --overwrite --icon=./src/imgs/ico.ico"
}

命令的名字可以自定义，只要能通过npm run [命令名]运行即可。如我的项目中使用packager命令打包：

npm run packager

四、文件结构的优化

将修改好的main.js文件复制到dist文件夹，并命名为electron.js。此步骤非常关键，因为它直接关系到应用的入口文件配置。

在main.js文件中，确保加载正确的入口文件：

// main.js loaded: '../dist/index.html'
// electron.js loaded: 'index.html'

五、解决接口访问问题

在应用运行过程中，可能会遇到接口请求无法通过的问题。解决方法是在开发阶段通过alert查看具体访问的地址，并根据实际需要进行配置。

六、优化窗口配置

如果希望应用在不同屏幕上自适应显示，可以在main.js中添加以下代码：

let size = require('electron').screen.getPrimaryDisplay().workAreaSize
let width = parseInt(size.width)
if (width >= 1920) {
  // 大屏幕优化
  mainWindow = new BrowserWindow({
    fullscreenable: true,
    fullscreen: true,
    autoHideMenuBar: true
  })
} else {
  let height = parseInt(1080 * width / 1920 + 30)
  // 非大屏幕优化
  mainWindow = new BrowserWindow({
    width: width,
    height: height,
    fullscreenable: false,
    fullscreen: true,
    autoHideMenuBar: true
  })
}

为了隐藏菜单栏，可以在main.js中添加以下设置：

frame: false,

七、最终打包与部署

进入终级阶段，执行以下命令：

npm run build
npm run packager

注意：在打包多次执行时，确保清空之前的输出文件夹，避免因文件冲突导致错误。

八、代码优化与维护

如果需要做代码修改或添加新功能，记得：