国内请使用淘宝的镜像,参考 https://www.shushi3.com/post/1

使用vite

创建一个vue3项目

npm init vue@latest

cd到上一步创建的项目中

安装electron

npm install electron -D
npm install electron-builder -D
npm install vite-plugin-electron -D

根目录下新建 electron/index.ts，修改vite.config.ts配置文件

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'

export default defineConfig({
  // ...
  plugins: [
    // ...
   electron({
      entry: "electron/index.ts"
    })
  })
  ],
})

// electron/index.ts

import { app, BrowserWindow } from 'electron'
import path from 'path'
let win: BrowserWindow | null;
const createWindow = () => {
  win = new BrowserWindow({
    webPreferences: {
      devTools: true,
      contextIsolation: false,
      nodeIntegration: true
    }
  })
  if (process.env.NODE_ENV != 'development') {
    win.loadFile(path.join(__dirname, "../dist/index.html"));
  } else {
    win.loadURL(`${process.env['VITE_DEV_SERVER_URL']}`);
  }
}
app.whenReady().then(createWindow)

在package.json添加main字段

// package.json
{
  // ...
  "main": "dist-electron/index.js",
  "scripts": {
    "app:dist": "vite build && electron-builder",
  },
  "build": {
    "appId": "com.electron.desktop",
    "productName": "electron",
    "asar": true,
    "copyright": "Copyright © 2022 electron",
    "directories": {
      "output": "release/"
    },
    "files": [
      "dist-electron",
      "dist"
    ],
    "mac": {
      "artifactName": "${productName}_${version}.${ext}",
      "target": [
        "dmg"
      ]
    },
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ],
      "artifactName": "${productName}_${version}.${ext}"
    },
    "nsis": {
      "oneClick": false,
      "perMachine": false,
      "allowToChangeInstallationDirectory": true,
      "deleteAppDataOnUninstall": false
    },
    "publish": [
      {
        "provider": "generic",
        "url": "http://127.0.0.1:8080"
      }
    ],
    "releaseInfo": {
      "releaseNotes": "版本更新的具体内容"
    }
  }
}

使用@vue/cli

1 安装vue全局脚手架vue-cli: npm install -g @vue/cli

创建vue项目 vue create electron-vue-demo 其中electron-vue-demo为项目名称可以自己命名，执行完成实现了vue项目搭建。

2 实现桌面应用展示：兼容electron技术执行命令： vue add electron-builder

执行完成后vue项目src目录下会新增background.js文件，为窗口实现命令脚本。

完成窗口vue的项目搭建

3 运行，查看package.json中【scripts】有启动打包命令

"scripts": {
  "serve": "vue-cli-service serve", //vue 页面启动
  "build": "vue-cli-service build", //vue 打包
  "electron:build": "vue-cli-service electron:build", //桌面应用打包
  "electron:serve": "vue-cli-service electron:serve", //桌面应用启动
  "postinstall": "electron-builder install-app-deps", //生成环境
  "postuninstall": "electron-builder install-app-deps"//生成环境
}