您现在的位置是：首页 >学无止境 >electron+vue3+vite+antdesign网站首页学无止境

首先在我的项目vue3+vite+antdesign 基础上使用electron，两者并不冲突，只需要在我原先项目基础上安装electron就行，需要安装一些包以及配置就可以了，本次记录一下怎么使用，以及当时遇到的问题

前提是vue3+vite+antdesign 没问题哈！

1.安装包

cnpm i -D concurrently cross-env electron electron-builder electron-packager wait-on

2.配置package.json

注意electron时，"type": "commonjs"，用vite项目的时候是"type": "module",(当时这个地方没注意，报错了)

  "type": "commonjs",

"scripts": {

    "serve": "vite",

    "build": "vite build",

    "preview": "vite preview",

    "start": "electron .",

    "packager": "electron-packager ./dist/ --platform=win32 --arch=x64 --overwrite",

    "electron": "wait-on tcp:3000 && cross-env IS_DEV=true electron .",

    "electron:dev": "concurrently -k "cross-env BROWSER=none npm run dev" "npm run electron"",

    "electron:build.win": "npm run build && electron-builder --win --dir",

    "electron:build.linux": "npm run build && electron-builder --linux appImage",

    "electron:build.test": "npm run build && electron-builder --dir",

    "electron:build.exe": "npm run build && electron-builder --win"

  },

添加：

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

 "build": {

    "appId": "com.my-website.my-app",

    "productName": "MyApp",

    "copyright": "Copyright © 2022 ${author}",

    "mac": {

      "category": "public.app-category.utilities"

    },

    "nsis": {

      "oneClick": false,

      "allowToChangeInstallationDirectory": true

    },

    "files": [

      "dist/**/*",

      "electron/**/*"

    ],

    "directories": {

      "buildResources": "assets",

      "output": "dist_electron"

    },

    "electronDownload": {

      "mirror": "https://npm.taobao.org/mirrors/electron/"

    }

  }

 3，vite.config.js

修改base

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

 // base: env.VITE_BASE_URL,
  base: process.env.ELECTRON=="true" ? './' : "",
  plugins: [vue()]
})

4.入口文件

在项目根目录新建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();
  }
});