将Vue3 + Vite网页构建为Electron应用

1. 初始化vue3项目
2. 构建为electron应用
   1. 1. 安装依赖
   2. 2. 配置软件构建选项
   3. 3. 添加执行脚本
   4. 4. 设置作者和程序入口
   5. 5. 根据环境设置不同工作目录
   6. 6. 添加electron入口文件
   7. 7. 添加preload.js
   8. 8. 启动
      1. 启动 electron 开发环境
      2. 构建 electron 应用程序
      3. 启动浏览器开发环境
      4. 构建网页静态文件

Vue3 + Vite + Electron + Typescript

初始化vue3项目

npm init vue@3

构建为electron应用

https://dev.to/brojenuel/vite-vue-3-electron-5h4o

1. 安装依赖

# 设置 electron 国内源
$env:ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"
$env:ELECTRON_CUSTOM_DIR="{{ version }}"

# 安装依赖
yarn add -D concurrently cross-env electron electron-builder wait-on

2. 配置软件构建选项

https://www.electron.build/configuration/configuration

package.json

"build": {
    "appId": "tech.xianheng.nfp-launcher",
    "productName": "NFP Launcher",
    "copyright": "Copyright © 2022 ${author}",
    "nsis": {
        "oneClick": false,
        "allowToChangeInstallationDirectory": true
    },
    "files": [
        "dist/**/*",
        "electron/**/*"
    ],
    "directories": {
        "buildResources": "assets",
        "output": "dist_electron"
    }
}

3. 添加执行脚本

package.json

"scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview --port 4173",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit",
    "electron": "wait-on tcp:3000 && cross-env IS_DEV=true electron .",
    "electron:pack": "electron-builder --dir",
    "electron:dev": "concurrently -k \"cross-env BROWSER=none yarn dev\" \"yarn electron\"",
    "electron:builder": "electron-builder",
    "build:for:electron": "vue-tsc --noEmit && cross-env ELECTRON=true vite build",
    "app:build": "yarn build:for:electron && yarn electron:builder"
},

4. 设置作者和程序入口

package.json

{
    "name": "nfp-launcher",
    "author": "whuls",
    "version": "0.0.0",
    "main": "electron/electron.js",
}

5. 根据环境设置不同工作目录

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  base: process.env.ELECTRON=="true" ? './' : "/",
  plugins: [vue()]
})

6. 添加electron入口文件

electron/electron.js

const path = require('path');
const { app, BrowserWindow } = require('electron');

const isDev = process.env.IS_DEV == "true" ? true : false;

function createWindow() {
    // 创建浏览器窗口
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, "preload.js"),
            nodeIntegration: true
        }
    });

    // 打开文件
    mainWindow.loadURL(
        isDev
            ? 'http://localhost:3000'
            : `file://${path.join(__dirname, '../dist/index.html')}`
    );

    // 打开开发者工具
    if (isDev) {
        mainWindow.webContents.openDevTools();
    }
}

app.whenReady().then(() => {
    createWindow();

    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow();
        }
    });
});

// 当所有窗口关闭时退出应用，除了macOS
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

7. 添加preload.js

electron/preload.js

// 所有的 Nodejs APIs 在 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]);
    }
});

8. 启动

启动 electron 开发环境

yarn electron:dev

构建 electron 应用程序

yarn app:build

构建过程中设置国内源可以提升构建速度：

$env:ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"
$env:ELECTRON_BUILDER_BINARIES_MIRROR="http://npm.taobao.org/mirrors/electron-builder-binaries/"
yarn app:build

构建时下载的zip包放在下面两个目录中：

• C:\Users\[user]\AppData\Local\electron\Cache
• C:\Users\[user]\AppData\Local\electron-builder\cache

启动浏览器开发环境

yarn dev

构建网页静态文件

yarn build