Vue+Electron打包桌面应用(从零到一完整教程)

文章目录

• 一.使用vite+vue3+js方式
• • 1.构建桌面应用
  • • 1- 1.创建项目
    • 1- 2. 安装依赖运行项目
    • 1- 3.配置Electron
    • 1- 4.修改配置文件
    • • 1) vite.config.js
      • 2）main.js(项目根目录新增)
      • 3）preload.js(项目根目录下新增)
      • 4）package.json
    • 1- 5.打包vue项目
    • 1- 6.运行electron
  • 2.热更新开发环境
  • • 2-1. 编辑main.js
    • 2-2. 同时开启vite和electron服务
    • 2-3.运行
  • 3.打包操作
  • • 3-1.实现
    • • 3-1-1. 环境变量
    • 3-2. 创建electron文件夹
    • 3-3. 编辑electron/main.js
    • 3- 4. 编辑package.json
    • 3-5.打包
• 二.使用第三方提供好的创建vite+electron+TS
• • 2-1.使用npm包安装方式vite+vue3+Ts方式(某大佬已经搭建好了,只能Ts)
  • 2-2.使用脚手架方式方式创建vite-electron项目
  • 上面两种方式运行时都正常,打包时都会报错以下内容
• 三.使用vue-cli脚手架方式(支持vue2/3)
• • 1.Node版本要求
  • 2.通过vue-cli创建vue项目(2/3都可以)
  • 3.添加vue自带的electron-builder
  • 4.打包exe程序

一.使用vite+vue3+js方式

切记,整个项目的json文件不能有注释,及时没报错也不行,否则运行命令时还是有问题

1.构建桌面应用

参考此视频

1- 1.创建项目

 npm create vite@latest  或者  npm init vite@latest  // 选择vue3+js或者vue3+ts 

1- 2. 安装依赖运行项目

// 进入项目安装依赖 npm install // 运行项目 npm run dev 

1- 3.配置Electron

npm install electron  //这里建议用镜像 

如果上面下载安装比较慢的话,在项目根目录下创建.npmrc文件,放入以下代码,这样下载的来源就是去淘宝镜像去下载,比较快

ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/" 

1- 4.修改配置文件

1) vite.config.js

import {     defineConfig } from 'vite' import vue from '@vitejs/plugin-vue'  // https://vitejs.dev/config/ export default defineConfig({       base: './',	// 新增,打包的dist文件的index.html引入资源css/js的路径,这里使用相对路径,预防找不到的问题   plugins: [vue()] }) 

2）main.js(项目根目录新增)

此为electron运行的入口文件

// main.js  // 控制应用生命周期和创建原生浏览器窗口的模组 const {     app, BrowserWindow } = require('electron') const path = require('path')  function createWindow () {       // 创建浏览器窗口   const mainWindow = new BrowserWindow({         width: 800,     height: 600,     webPreferences: {           preload: path.join(__dirname, 'preload.js')     }   })    // 加载 index.html   mainWindow.loadFile('dist/index.html') // 此处跟electron官网路径不同，需要注意    // 打开开发工具   // mainWindow.webContents.openDevTools() }  // 这段程序将会在 Electron 结束初始化 // 和创建浏览器窗口的时候调用 // 部分 API 在 ready 事件触发后才能使用。 app.whenReady().then(() => {       createWindow()    app.on('activate', function () {         // 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他     // 打开的窗口，那么程序会重新创建一个窗口。     if (BrowserWindow.getAllWindows().length === 0) createWindow()   }) })  // 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在 // 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。 app.on('window-all-closed', function () {       if (process.platform !== 'darwin') app.quit() })  // 在这个文件中，你可以包含应用程序剩余的所有部分的代码， // 也可以拆分成几个文件，然后用 require 导入。 

3）preload.js(项目根目录下新增)

// preload.js  // 所有Node.js API都可以在预加载过程中使用。 // 它拥有与Chrome扩展一样的沙盒。 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])   } }) 

4）package.json

{       "name": "sd",   "private": true,   "version": "0.0.0",   "main": "main.js",  // 新增   //"type": "module", 创建项目自带的这个要删除,否则会有问题   "scripts": {         "dev": "vite",     "build": "vite build",     "preview": "vite preview",     "electron:serve": "electron ."  //新增 electron运行命令   },   "dependencies": {         "electron": "^27.0.0",     "vue": "^3.3.4"   },   "devDependencies": {         "@vitejs/plugin-vue": "^4.2.3",     "vite": "^4.4.5"   } } 

1- 5.打包vue项目

npm run build 

1- 6.运行electron

yarn electron:serve 或者 npm run electron:serve 

到这一步基本完成了,后面再新增一下热更新及打包的配置,可以接着往下看

2.热更新开发环境

2-1. 编辑main.js

将mainWindow.loadFile(‘dist/index.html’)更新为mainWindow.loadURL(“http://localhost:5173”)，更新后的文件如下所示：

// main.js  // 控制应用生命周期和创建原生浏览器窗口的模组 const {     app, BrowserWindow