1、Vite

Vite是一种新型前端构建工具，能够显著提升前端开发体验。

2、Electron

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入Chromium和Node.js到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。

3、创建Vite项目

3.1、创建项目，根据步骤进行选择

  1. yarn create vite

3.2、进入&运行

  1. cd vite-electron
  2. yarn
  3. yarn dev

3.3、运行成功的界面

image.png

4、配置Electron

4.1、首先安装electron至vite应用

  1. yarn add --dev electron

4.2、配置vite.config.js

  1. import { defineConfig } from 'vite'
  2. import vue from '@vitejs/plugin-vue'
  3. import path from 'path'
  5. // https://vitejs.dev/config/
  6. export default defineConfig({
  7.   plugins: [vue()],
  8.   base: path.resolve(__dirname, './dist/'),
  9. })

4.3、配置main.js

创建main.js文件

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

4.4、配置preload.js

创建preload.js文件

4.5、配置package.json

  • 配置electron的命令，新增"main": "main.js"

    1. {
    2. "name": "vite-electron",
    3. "version": "0.0.0",
    4. "main": "main.js",
    5. "scripts": {
    6.   "dev": "vite",
    7.   "build": "vite build",
    8.   "preview": "vite preview"
    9. },
    10. "dependencies": {
    11.   "vue": "^3.2.25"
    12. },
    13. "devDependencies": {
    14.   "@vitejs/plugin-vue": "^2.0.0",
    15.   "electron": "^16.0.7",
    16.   "vite": "^2.7.2"
    17. }
    18. }

    5、热重载

    5.1、需要使用两个库

    • concurrently：阻塞运行多个命令，-k参数用来清除其它已经存在或者挂掉的进程
    • wait-on：等待资源，此处用来等待url可访问

进行安装concurrently，wait-on

  1. yarn add -D concurrently wait-on

  • 接着更新文件package.json，scripts新增两条命令：

    1. "electron": "wait-on tcp:3000 && electron .",
    2. "electron:serve": "concurrently -k \"yarn dev\" \"yarn electron\""

  • yarn electron为等待tcp协议3000端口可访问，然后执行electron

  • yarn electron:serve为阻塞执行开发服务器运行和yarn electron命令

开发中只需要使用yarn electron:serve即可。

5.2、使用mainWindow.loadURL()的方式来加载, 修改main.js中对应下面部分的代码

  1.   // 加载 index.html
  2.   // mainWindow.loadFile('dist/index.html') 将该行改为下面这一行，加载url
  3.   mainWindow.loadURL("http://localhost:3000")

5.3、编辑vite.config.js

  1. // vite.config.js
  3. import { defineConfig } from 'vite'
  4. import vue from '@vitejs/plugin-vue'
  6. // https://vitejs.dev/config/
  7. export default defineConfig({
  8.   base: "./",    // 新增
  9.   plugins: [vue()]
  10. })

6、打包

6.1、环境变量

https://zhuanlan.zhihu.com/p/423211730