如何将一个现有的Vue网页项目封装成electron桌面应用

最新推荐文章于 2025-05-02 16:06:43 发布

Aglaia_H5

最新推荐文章于 2025-05-02 16:06:43 发布

阅读量2.5k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： electron桌面应用开发文章标签： vue js react

本文链接：https://blog.youkuaiyun.com/Aglaia_web/article/details/107543945

本文介绍了如何使用Electron将基于Vue的网页项目转化为桌面应用，详细讲解了从安装依赖到打包成.exe文件的步骤，包括修改publicPath、处理API请求等关键操作，帮助开发者快速将现有前端项目转换为桌面应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

- 需求缘由
- 基础
- 步骤
- 总结
- 参考内容

需求缘由

开发了很久的网页项目，领导突然想变成桌面应用，又要重写代码？no，no，no。不可能的。重写代码吃力不讨好，浪费时间，浪费精力。那么我们该怎么办呢？
幸好，electron是如此神奇，它提供了一种能让你将任何前端代码的网站页面封装成桌面应用。无论是vue，react 还是 angular等现有的框架都能实现。

基础

学习该内容需要基本的 javascript 语法基础，以及 node.js 基础。

步骤

1，安装electron依赖包（局部安装，只安装开发依赖）
npm install electron --save-dev

2，package.json 同级位置创建文件 electron.js

electron.js 文件内容：

// 主进程
// Modules to control application life and create native browser window
const {
   
   app, protocol, Menu, BrowserWindow } = require('electron')
const path = require('path')
const {
   
    readFile } = require ('fs')
const {
   
    URL } =  require ('url')

// 处理文件打包之后的访问路径为 app的相对路径,
function createProtocol(scheme) {
   
   
  protocol.registerBufferProtocol(
    scheme,
    (request, respond) => {
   
   
      let pathName = new URL(request.url).pathname
      pathName = decodeURI(pathName) // Needed in case URL contains spaces

      readFile(path.join(__dirname