当前位置:   article > 正文

vue3+ts+vite+electron+electron-packager打包成exe文件

vue3+ts+vite+electron+electron-packager打包成exe文件

目录

1、创建vite项目

2、添加需求文件

3、根据package.json文件安装依赖

4、打包

5、electron命令运行

6、electron-packager打包成exe文件


 Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron

1、创建vite项目

npm create vite@latest

2、添加需求文件

根目录下新建main.js

  1. // main.js
  2. // Modules to control application life and create native browser window
  3. const { app, BrowserWindow } = require('electron')
  4. const path = require('node:path')
  5. const createWindow = () => {
  6. // Create the browser window.
  7. const mainWindow = new BrowserWindow({
  8. width: 800,
  9. height: 600,
  10. webPreferences: {
  11. preload: path.join(__dirname, 'preload.js')
  12. }
  13. })
  14. // 加载 index.html
  15. mainWindow.loadFile('./dist/index.html')
  16. // 打开开发工具
  17. // mainWindow.webContents.openDevTools()
  18. }
  19. // 这段程序将会在 Electron 结束初始化
  20. // 和创建浏览器窗口的时候调用
  21. // 部分 API 在 ready 事件触发后才能使用。
  22. app.whenReady().then(() => {
  23. createWindow()
  24. app.on('activate', () => {
  25. // 在 macOS 系统内, 如果没有已开启的应用窗口
  26. // 点击托盘图标时通常会重新创建一个新窗口
  27. if (BrowserWindow.getAllWindows().length === 0) createWindow()
  28. })
  29. })
  30. // 除了 macOS 外,当所有窗口都被关闭的时候退出程序。 因此, 通常
  31. // 对应用程序和它们的菜单栏来说应该时刻保持激活状态,
  32. // 直到用户使用 Cmd + Q 明确退出
  33. app.on('window-all-closed', () => {
  34. if (process.platform !== 'darwin') app.quit()
  35. })
  36. // 在当前文件中你可以引入所有的主进程代码
  37. // 也可以拆分成几个文件,然后用 require 导入。

根目录下新建preload.js文件 

  1. // preload.js
  2. // 所有的 Node.js API接口 都可以在 preload 进程中被调用.
  3. // 它拥有与Chrome扩展一样的沙盒。
  4. window.addEventListener('DOMContentLoaded', () => {
  5. const replaceText = (selector, text) => {
  6. const element = document.getElementById(selector)
  7. if (element) element.innerText = text
  8. }
  9. for (const dependency of ['chrome', 'node', 'electron']) {
  10. replaceText(`${dependency}-version`, process.versions[dependency])
  11. }
  12. })

 vite.config.js中配置修改

  1. // vite.config.ts
  2. import { defineConfig } from "vite";
  3. import vue from "@vitejs/plugin-vue";
  4. import path from "path";
  5. export default defineConfig({
  6. base: "./", // 设置公共路径为相对路径,
  7. plugins: [vue()],
  8. resolve: {
  9. alias: {
  10. "@": path.resolve(__dirname, "src"),
  11. },
  12. },
  13. });
  14. //不设置路径,页面空白,提示找不到资源

 直接在package.json中添加缺少数据,或者根据缺失依赖逐个添加

  1. //package.json
  2. {
  3. "name": "my-electron-app",
  4. "version": "1.0.0",
  5. "description": "Hello World!",
  6. "main": "main.js",
  7. "author": "Jane Doe",
  8. "license": "MIT",
  9. "scripts": {
  10. "dev": "vite",
  11. "start": "electron .",
  12. "build": "vite build",
  13. "preview": "vite preview",
  14. "electron:serve": "vite build & electron . ",
  15. "packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"
  16. },
  17. "dependencies": {
  18. "vue": "^3.4.29"
  19. },
  20. "devDependencies": {
  21. "@vitejs/plugin-vue": "^5.0.5",
  22. "electron": "^31.2.0",
  23. "electron-packager": "^17.1.2",
  24. "typescript": "^5.2.2",
  25. "vite": "^5.3.1",
  26. "vue-tsc": "^2.0.21"
  27. }
  28. }
3、根据package.json文件安装依赖

yarn 

4、打包

yarn build

5、electron命令运行

yarn start

6、electron-packager打包成exe文件

 yarn packager

 

 在文件夹中双击打开

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/黑客灵魂/article/detail/887311?site
推荐阅读
相关标签
  

闽ICP备14008679号