vue3+vite+electron开发桌面端应用流程

时间：2025-01-22 16:07:41

一、创建项目

  1. 初始化项目: npm init vite@latest'
    project name: 输入项目名称，select a framework: 选择框架vue
    select a variant：选择使用js或者ts
  2. 安装默认依赖包: 进入项目，npm install
  3. 安装electron: npm install --save-dev electron
  4. 安装热加载(自动加载更新): npm install electron-reload --save-dev(注意：electron-reload目前最新版本是2.0.0-alpha.1, 需要安装指定的稳定版)
  5. 安装打包工具: npm install electron-builder --dev

二、配置electron相关的文件

  1. 在根目标下创建文件夹electron，存放electron相关的文件
  2. electron 文件夹下创建文件， 通过预加载脚本从渲染器访问。
// 
('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = (selector)
    if (element)  = text
  }
  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, [dependency])
  }
})
  1. electron 文件夹下创建, 作为electron的入口文件
// 
// 控制应用生命周期和创建原生浏览器窗口的模组
// app 模块，它控制应用程序的事件生命周期。
// BrowserWindow 模块，它创建和管理应用程序窗口。
const { app, BrowserWindow } = require('electron');
const path = require('path')
  // 打开窗口
function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800, // 窗口的宽度
    height: 600, // 窗口的高度
    // 网页功能设置
    webPreferences: {
      nodeIntegration: true,  // 是否启用Node integration. 默认值为 false.
      contextIsolation: false, // 是否在独立 JavaScript 环境中运行 electron API和指定的preload 脚本. 默认为 true
      enableRemoteModule: true,  // 启用或远程模块, 默认为 true
      preload: (__dirname, ''), // 使用预加载脚
    },
    autoHideMenuBar: true, // 窗口菜单栏是否自动隐藏，默认false
  }) 
  // 通过改变变量值来控制加载的文件，dev 或者build时修改env值。
  let env = 'pro';
  // 配置热更新
  if (env == 'pro') {
    const elePath = (__dirname, '../node_modules/electron')
    require('electron-reload')('./', {
      electron: require(elePath),
    })
    // 热更新监听窗口，这里是vue启动时的地址
    ('http://localhost:8888')
    // 打开开发工具
    ()
  } else {
    // 生产环境中要加载文件 
    ((__dirname, '../dist/'))
  }
}
 
// 这段程序将会在 electron 结束初始化和创建浏览器窗口的时候调用
().then(() => {
  createWindow()
  ('activate', function () {
    // 如果没有其他打开的窗口，那么程序会重新创建一个窗口。
    if (().length === 0) createWindow()
  })
})
 
// 当所有窗口都被关闭的时候退出程序。
('window-all-closed', function () {
  if ( !== 'darwin') ()
})
  1. 根目录下创建
// 
{
  "productName": "appName",  // 包名称
  "files": ["./electron/", "./dist"],
  "extraFiles": ["./videos", "./cvideo"], 
  "directories": {
    "output": "./builder"
  }
}
  1. 中配置electron命令
    在scripts中添加electron运行和打包命令：
	"electron:serve": "electron .", 
    "electron:build": "vite build & electron-builder build --config "

三、项目启动和打包

  1. 启动vue项目： npm run dev
  2. 启动electron: npm run electron:serve
  3. 打包electron: npm run electron:build

四、常见问题及解决方法

  1. 报错信息：electron Unable to find Electron app at *****
    报错原因：入口文件路径错误
    解决方法：在package中添加electron应用程序的入口文件路径："main": "electron/"
  2. 报错信息：ReferenceError: require is not defined in ES module scope, you can use import instead
    This file is being treated as an ES module because it has a ‘.js’ file extension an ***
    报错原因：require 在 ESM 规范中未定义
    解决方法：删除"type": "module"
  3. build时报错信息：/electron/electron/releases/download/v20.3.1/electron-v20.3.”: dial tcp 20.205.243.166:443: connectex: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond
    报错原因：打包时要到github上下载electron, 速度很慢导致失败。
    解决方法：从github上下载electron到C:\Users\xxx\AppData\Local\electron\Cache\xxxxx
  4. 打包后的exe文件执行时页面空白
    报错原因：资源路径是被打包成了绝对路径
    解决方法：找到进行修改文件加载路径：
export default defineConfig({
     base: './',设置基础路径为根目录
});

相关文章