使用 electron 把 vue 项目打包成客户端

1. 新建一个Vue项目

新建一个vue项目,或者在已经写好的vue项目上操作

2. 安装依赖包

需要安装的包有2个

electron

electron-builder

安装失败的,可看另外一篇解决方法https://blog.csdn.net/Anorry/article/details/144061069?spm=1001.2014.3001.5501

3. 在项目根目录创建文件夹,存放文件

在根目录新建 electron 文件夹,文件夹下存放两个文件:main.js(主进程)、preload.js(渲染进程)

main.js

复制代码
const { app, BrowserWindow, Menu } = require("electron");
const path = require("path");
const NODE_ENV = process.env.NODE_ENV;
 
function createWindow() {
  Menu.setApplicationMenu(null);
  // 创建浏览器窗口
  const mainWindow = new BrowserWindow({
    show: false,
    minWidth: 1440,
    minHeight: 900,
    webPreferences: {
      partition: String(+new Date()),
      preload: path.join(__dirname, "preload.js"),
    },
  });
  mainWindow.maximize();
  mainWindow.show();
  // 如果是开发环境就把当前运行的web端口做成客户端预览
  // 如果是生产环境就把打包后的index做成客户端预览
  mainWindow.loadURL(
    NODE_ENV === "development"
      ? "http://localhost:8080"
      : `file://${path.join(__dirname, "../dist/index.html")}`
  );
}
 
// 这段程序将会在 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();
});

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])
    }
  })

4. 在 vite.config.js 内配置

配置基本路径 ./ 防止出现打包后打开页面空白

复制代码
publicPath: './',
transpileDependencies: true,

5. 在 package.json 内配置入口文件,配置一下运行命令

复制代码
"main": "electron/main.js",

"electron": "wait-on tcp:8090 && cross-env NODE_ENV=development electron .",

6. 安装两个库

  • cross-env:该库让开发者只需要注重环境变量的设置,而无需担心平台设置
  • wait-on:等待资源,此处用来等待url可访问

为了使项目和electron正常运行,需要先运行项目,使得其开发服务器的url可以正常访问,然后再开启electron去加载url。

此处需要安装两个库

7. 配置electron打包命令和配置项

在前面我们安装了 electron-builder 依赖,所以这里无需安装

把下面代码,放到 package.json 内,与 dependencies同级

复制代码
"build": {
    "appId": "com.test",
    "productName": "electron打包测试",
    "copyright": "Copyright © 2023",
    "mac": {
      "category": "public.app-category.utilities",
      "icon": "public/icons/icon.icns"
    },
    "win": {
      
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    },
    "files": [
      "dist/**/*",
      "electron/**/*"
    ],
    "directories": {
      "buildResources": "assets",
      "output": "dist_electron"
    }
  }
复制代码
"electron:build": "vite build  --mode production && electron-builder",

8. 运行命令 npm run electron:build 打包

打包成功后,会在根目录出现一个 dist_electron 文件夹,文件夹下会有一个 .exe 应用程序

相关推荐
独立开阀者_FwtCoder15 分钟前
"页面白屏了?别慌!前端工程师必备的排查技巧和面试攻略"
java·前端·javascript
慧一居士16 分钟前
Vite 完整功能详解与 Vue 项目实战指南
前端·vue.js
Hilaku23 分钟前
说实话,React的开发体验,已经被Vue甩开几条街了
前端·javascript·vue.js
星语卿23 分钟前
Js事件循环
javascript
datagear24 分钟前
如何在DataGear 5.4.1 中快速制作HTTP数据源服务端分页的数据表格看板
javascript·数据可视化
艾克马斯奎普特31 分钟前
为什么响应性语法糖最终被废弃了?尤雨溪也曾经试图让你不用写 .value
前端·vue.js·代码规范
namehu32 分钟前
“什么?视频又双叒叕不能播了!”—— 移动端视频兼容性填坑指南
javascript·html
MR_发33 分钟前
万字实现带@和表情包的输入框
vue.js·typescript
多啦C梦a34 分钟前
React Hooks 编程:`useState` 和 `useEffect`,再不懂就OUT了!
前端·javascript
yvvvy1 小时前
# React Hooks 全面解析:从 useState 到 useEffect,掌握状态与副作用管理
javascript