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

一、创建项目

  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 文件夹下创建preload.js文件, 通过预加载脚本从渲染器访问Node.js。
// preload.js
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }
  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})
  1. electron 文件夹下创建main.js, 作为electron的入口文件
// main.js
// 控制应用生命周期和创建原生浏览器窗口的模组
// 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: path.join(__dirname, 'preload.js'), // 使用预加载脚
    },
    autoHideMenuBar: true, // 窗口菜单栏是否自动隐藏,默认false
  }) 
  // 通过改变变量值来控制加载的文件,dev 或者build时修改env值。
  let env = 'pro';
  // 配置热更新
  if (env == 'pro') {
    const elePath = path.join(__dirname, '../node_modules/electron')
    require('electron-reload')('./', {
      electron: require(elePath),
    })
    // 热更新监听窗口,这里是vue启动时的地址
    mainWindow.loadURL('http://localhost:8888')
    // 打开开发工具
    mainWindow.webContents.openDevTools()
  } else {
    // 生产环境中要加载文件 index.html
    mainWindow.loadFile(path.resolve(__dirname, '../dist/index.html'))
  }
}
 
// 这段程序将会在 electron 结束初始化和创建浏览器窗口的时候调用
app.whenReady().then(() => {
  createWindow()
  app.on('activate', function () {
    // 如果没有其他打开的窗口,那么程序会重新创建一个窗口。
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})
 
// 当所有窗口都被关闭的时候退出程序。
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})
  1. 根目录下创建electron-builder.json
// electron-builder.json
{
  "productName": "appName",  // 包名称
  "files": ["./electron/main.js", "./dist"],
  "extraFiles": ["./videos", "./cvideo"], 
  "directories": {
    "output": "./builder"
  }
}
  1. package.json中配置electron命令
    在scripts中添加electron运行和打包命令:
	"electron:serve": "electron .", 
    "electron:build": "vite build & electron-builder build --config electron-builder.json"

三、项目启动和打包

  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/main.js"
  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时报错信息:https://github.com/electron/electron/releases/download/v20.3.1/electron-v20.3.1-win32-x64.zip”: 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文件执行时页面空白
    报错原因:资源路径是被打包成了绝对路径
    解决方法:找到vite.config.js进行修改文件加载路径:
export default defineConfig({
     base: './',设置基础路径为根目录
}); 

你可能感兴趣的:(vue,electron,javascript,前端)