Vite + Vue 3 + electron 环境搭建

第1步，建立一个新的vite项目

yarn create vite

第2步，安装项目依赖

yarn add -D concurrently cross-env electron electron-builder wait-on

第3部，修改package.json文件

添加build节点，更多的信息可以参阅electron.build

"build": {
  "appId": "com.my-website.my-app",
  "productName": "MyApp",
  "copyright": "Copyright © 2019 ${author}",
  "mac": {
    "category": "public.app-category.utilities"
  },
  "nsis": {
    "oneClick": false,
    "allowToChangeInstallationDirectory": true
  },
  "files": [
    "dist/**/*",
    "electron/**/*"
  ],
  "directories": {
    "buildResources": "assets",
    "output": "dist_electron"
  }
}

修改scripts节点

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview",

  "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:serve": "electron .",
  "electron:builder": "electron-builder",
  "build:for:electron": "cross-env ELECTRON=true vite build",
  "app:pack": "yarn build:for:electron && electron-builder --dir",
  "app:build": "yarn build:for:electron && yarn electron:builder"
},

添加main节点

{
  "main": "electron/electron.js",
}

第 4 步：编辑vite.config.js

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

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

因为base的设置在ELECTRON环境下与网站不同。

第 5 步：

在项目根文件夹创建一个新的文件夹electron，并在其中创建文件electron.js

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

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

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

  // and load the index.html of the app.
  // win.loadFile("index.html");
  mainWindow.loadURL(
    isDev
      ? 'http://localhost:3000'
      : `file://${path.join(__dirname, '../dist/index.html')}`
  );
  // Open the DevTools.
  if (isDev) {
    mainWindow.webContents.openDevTools();
  }
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow()
  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
});

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

再创建一个文件preload.js

// electron/preload.js
// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
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])
  }
})

完成

到此环境已安装完成，请使用以下命令

yarn dev //浏览器开发
yarn electron:serve 

yarn electron:dev //electron开发

yarn app:pack //发布，只合并，不产生压缩包 yarn app:build //发布应用