electron vite vue3的开发环境搭建

electron vite vue3的开发环境搭建

electron的安装(2选1)

• 设置淘宝镜像

npm config set electron_mirror https://npmmirror.com/mirrors/electron/

• 在项目根目录下的 .npmrc 文件中添加

electron_mirror=https://npmmirror.com/mirrors/electron/

electron的vite开发环境搭建

1. 使用vite创建项目

使用 NPM:

$ npm create vite@latest

使用 Yarn:

$ yarn create vite

使用 PNPM:

$ pnpm create vite

electron的主进程和渲染进程

1. 在src目录下创建electron目录，用于存放electron相关的代码
2. electron目录下创建main和 renderer目录，分别用于存放主进程和渲染进程的代码
3. 在electron/main/下创建index.js文件，用于启动electron的主进程

// src/electron/main/index.js
const { app, BrowserWindow } = require('electron')

app.whenReady().then(() => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true, // 把 Node.js 环境集成到渲染进程中
    }
  })

  if (isDev()) {
    win.webContents.openDevTools({ mode: 'right' });
    win.loadURL(process.argv[2]);
  } else {
    win.loadURL('app://index.html');
  }
})

electron的vite插件开发

1. 在项目根目录创建plugins文件夹，用于存放electron的开发，打包插件
2. 在plugins文件夹下创建vite-plugin-electron-dev.js文件，用于存放开发插件
3. 在plugins文件夹下创建vite-plugin-electron-build.js文件，用于存放打包插件
4. 在plugins文件夹下创建common.js文件，用于存放公共方法

// plugins/vite-plugin-electron-dev.js
import { electronBuild, electronRunning } from './common';

export default function createElectronDevPlugin() {
  return {
    name: 'vite-plugin-electron-dev',
    configureServer(server) {
      // 打包electron
      electronBuild();

      // 监听Vite服务端的启动事件
      server.httpServer.once('listening', () => {
        // 获取Vite服务端的运行地址信息
        const addressInfo = server.httpServer.address();
        const httpAddress =
          typeof addressInfo === 'string'
            ? addressInfo
            : addressInfo && `http://${addressInfo.address}:${addressInfo.port}`;

        // 使用子进程开启electron
        let electronProcess = electronRunning(httpAddress);

        // 监听electron进程关闭事件，关闭Vite服务端
        electronProcess.on('close', () => {
          server.close();
          process.exit();
        });

    }
  }
}

// plugins/vite-plugin-electron-build.js
import fs from 'fs';
import path from 'path';
import { electronBuild } from './common';

export default function createElectronBuildPlugin() {
  return {
    name: 'vite-plugin-electron-build',
    apply: 'build',
    closeBundle() {
      // 打包electron
      electronBuild();
      // 生成package.json, 创建node_modules文件夹
      preparePackageJson();
      // 生成安装包
      genElectronInstallPackage();
    },
  };
}

// 生成package.json, 创建node_modules文件夹，避免electron-builder打包时自动安装多余的依赖
const preparePackageJson = () => {
  const packageJsonPath = path.join(process.cwd(), 'package.json');
  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
  const electronConfig = packageJson.devDependencies.electron.replace('^', '');

  packageJson.main = 'main.js';
  delete packageJson.script;
  delete packageJson.devDependencies;

  packageJson.devDependencies = {
    electron: electronConfig,
  };

  if(!packageJson.dependencies) {
     packageJson.dependencies = {};
  }

  const targetJsonPath = path.join(process.cwd(), 'dist', 'package.json');
  fs.writeFileSync(targetJsonPath, JSON.stringify(packageJson));
  fs.mkdirSync(path.join(process.cwd(), 'dist', 'node_modules'));
};

// 使用electron-builder打包, 生成安装包
const genElectronInstallPackage = () => {
  const options = {
    config: {
      appId: 'com.example.app',
      productName: 'example',
      directories: {
        output: path.join(process.cwd(), 'release'),
        app: path.join(process.cwd(), 'dist'),
      },
      files: ['**/*'],
      extends: null,
      asar: true,
      nsis: {
        oneClick: false,
        perMachine: true,
        allowToChangeInstallationDirectory: false,
        createDesktopShortcut: true,
        createStartMenuShortcut: true,
        shortcutName: 'example',
      },
      publish: [{ provider: 'generic', url: 'http://localhost:3000' }],
    },
    project: process.cwd(),
  };

  return require('electron-builder').build(options);
};

// plugins/common.js
import { spawn } from 'child_process';

export const electronMainEntry = 'src/electron/main/index.js';
export const electronBuildOutputPath = '/dist/main.js';

export const electronBuild = (config) => {
  require('esbuild').buildSync({
    entryPoints: [electronMainEntry],
    bundle: true,
    platform: 'node',
    outfile: electronBuildOutputPath,
    external: ['electron'],
    ...config,
  });
};

export const electronRunning = (httpAddress) => {
  return spawn(require('electron').toString(), [electronBuildOutputPath, httpAddress], {
    cwd: process.cwd(),
    stdio: 'inherit',
  });
};

在vite.config.js中使用electron插件

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import createElectronDevPlugin from './plugins/vite-plugin-electron-dev';
import createElectronBuildPlugin from './plugins/vite-plugin-electron-build';

export default defineConfig({
  // 开发时使用createElectronDevPlugin插件
  plugins: [vue(), createElectronDevPlugin()],
  // 打包时使用createElectronBuildPlugin插件
  build: {
    rollupOptions: {
      plugins: [createElectronBuildPlugin()],
    },
  },
});

这篇好文章是转载于：编程之路