使用Electron打包一个Vue3项目全步骤

1.创建一个Vue3项目

2.使用 WebStorm打开项目,并安装依赖项

npm install

等待完成后,

安装electron

npm install --save-dev electron

等待完成后,

安装electron 打包依赖项(打包成可执行文件)

npm install electron-packager --save-dev

3.创建主进程文件main.js

在根目录下创建main.js,并根据官网快速上手栏目写入如下代码

javascript 复制代码
// main.js

// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('node:path')

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // 加载 index.html
  mainWindow.loadFile('dist/index.html')

  // 打开开发工具
  // mainWindow.webContents.openDevTools()
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
  createWindow()

})

// 除了 macOS 外,当所有窗口都被关闭的时候退出程序。 因此, 通常
// 对应用程序和它们的菜单栏来说应该时刻保持激活状态, 
// 直到用户使用 Cmd + Q 明确退出
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

// 在当前文件中你可以引入所有的主进程代码
// 也可以拆分成几个文件,然后用 require 导入。

需要修改和新增的部分如下图

javascript 复制代码
// 修改
import { app, BrowserWindow } from 'electron'
import path from 'node:path'
// 新增
import {fileURLToPath} from "node:url";
import { dirname } from 'path';
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

4.创建预加载文件

在项目根目录下创建preload.js

写入如下代码

javascript 复制代码
// preload.js

// 所有的 Node.js API接口 都可以在 preload 进程中被调用.
// 它拥有与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])
  }
})

5.修改路由规则 (Router/index.js)

从 createWebHistory 修改为 createWebHashHistory

否则会导致首页路由不显示的问题

6.修改基本地址(vite.config.js)

新增如下代码

7.配置运行选项(package.json)

新增两项

javascript 复制代码
"start": "electron .",
"pack": "electron-packager . --overwrite",

8.先build,后start

相关推荐
浩星21 小时前
iframe引入界面有el-date-picker日期框,点击出现闪退问题处理
前端·vue.js·elementui
技术钱21 小时前
element plus 多个form校验
前端
yume_sibai21 小时前
HTML HTML基础(3)
前端·html
米花丶21 小时前
JSBridge安全通信:iOS/Android桥对象差异与最佳实践
前端·webview
萌萌哒草头将军1 天前
🚀🚀🚀 Oxc 恶意扩展警告;Rolldown 放弃 CJS 支持;Vite 发布两个漏洞补丁版本;Rslib v0.13 支持 ts-go
前端·javascript·vue.js
接着奏乐接着舞。1 天前
3D地球可视化教程 - 第1篇:基础地球渲染系统
前端·javascript·vue.js·3d·three.js
龙傲天6661 天前
Scala的面向对象和函数式编程特性 Idea环境搭建和输入输出
前端
蓝色海岛1 天前
element-ui表格嵌套表格,鼠标移入时样式错乱-问题调研及处理办法
前端
喂_balabala1 天前
electron安装失败
electron
薄雾晚晴1 天前
Rspack 实战:用 SWC Loader 搞定 JS 兼容(支持 IE 11 + 现代浏览器,兼顾构建速度)
前端·vue.js