最新的前端开发环境搭建工具Vite，官网Vite | 下一代的前端工具链，支持涵盖最新 Electron在内的任意版本。

前期准备

安装 NodeJS

1. 基于Vite创建Vue3项目

npm create vite@latest

此命令类似 npm init，初始化一个最基础的搭建框架，但很多依赖包没有安装会弹出一些项目，需用户手动配置：

Ok to proceed? (y) » y
Project name: » vue-project
Select a framework: » Vue
Select a variant: » JavaScript

进入项目文件夹，使用指令 npm i(npm install简写形式)，自动读取 package.json，安装依赖试运行初始的Vite模板项目

npm -i
npm run dev

浏览器访问http://localhost:5173/ 查看

删除模板文件，留出开发空间

删除文件
     srcassetsvue.svg
     srccomponentsHelloWorld.vue
     srcstyle.css
删除代码
    srcmain.js
    import './style.css'
修改代码
    srcApp.vue
           <script setup>
           </script>
           <template>
                 <div>
                    Hello vite
                </div>
           </template>
           <style scoped>
           </style>
    index.html
           <title>Hello Vite</title>

2. 安装和配置Electron

因为 Electron等大型包可能不遵循 npm config set registry https://registry.npmmirror.com配置的源，仍通过官方源下载。为顺利下载 Electron镜像源，可在项目根目录新建 .npmrc文本文件，并添加以下镜像源

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

安装Electron

npm i electron@版本号 -D
或者
npm install eelectron@版本号 --save-dev
不指定版本号(npm i electron -D)默认最新版

安装 vite-plugin-electron

npm i vite-plugin-electron -D

vite-plugin-electron 是使用 vite 构建 electron 的插件，如果脚本用.ts写会在构建过程中将 .ts 文件转换为 .js 文件

本项目使用默认 vite.config.js，更改其内容为：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron/simple'  // 添加此行 simple表示简单模式
// https://vitejs.dev/config/
export default defineConfig({
 plugins: [
   vue(),
   electron({   //开始添加起
     main: {
       entry: 'electron/main.js',
     },
     preload: {
       input: 'electron/preload.js',
     },
   }),
 ],  //开始添加结束
})

相应的，新建 electron文件夹，并填充 main.js，preload.js

main.js

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

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    show: false,
    // minHeight:600,
    // minWidth:800,
    autoHideMenuBar: true, // 菜单栏
  });
  // 这里引入页面  如果说url 需要win.loadUrl()引入
  if(process.env['VITE_DEV_SERVER_URL']){
   win.loadURL(process.env['VITE_DEV_SERVER_URL'])
  }else{
   win.loadFile('dist/index.html')
   //win.loadFile(path.resolve(__dirname,"../dist/index.html"))
  }
 
  win.webContents.openDevTools();
 
  win.on(
    "activate",
    () => BrowserWindow.getAllWindows().length === 0 && createWindow()
  );
  // 解决内容空白加载问题
  win.on("ready-to-show", () => {
    win.show();
  });
 
  //一个窗口中的文本加载完成
  win.webContents.on("dom-ready", () => {
    console.log("2、一个窗口中的文本加载完成");
  });
 
  //一个窗口中的文本加载完成
  win.webContents.on("close", () => {
    console.log("8、关闭窗口");
  });
 
  
}
 
app.whenReady().then(() => {
  createWindow();
 
  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});
 
// 生命周期
 
// app初始化完成
app.on("ready", () => {});
 
// 一个窗口中的文本加载完成
app.on("dom-ready", () => {});
 
// 所有窗口都被关闭时触发
app.on("window-all-closed", () => {
  app.quit();
});

在package.json中，定义主进程入口（原生 Electron项目也需要做这一步）

"name": "vite-project",
"private": true,
"version": "0.0.0",
"type": "module",
"main": "dist-electron/main.js",  加这一行

定义了主进程入口后，原来的报错没有了，但还有一些 mjs和 cjs的运行兼容问题如果在 package.json中定义了

"type": "module"

则NodeJS会使用ES(ESM)规范，导致：

preload.js在dis-electron中被转换为 preload.mjs
require的引入模块方法不可用，只能使用 import xxx from 'xxx'
NodeJS的内置全局变量 __dirname不可用为了继续使用以上三点方法，需告诉NodeJS使用CommonJS规范，做法是删除项目根目录中 package.json中的

"type": "module"

再运行指令，即可成功运行Electron项目

npm run dev

其他指令 npm run build会同时生成 dist和 dist-electron两个文件夹只有指令 npm run dev单独生成 dist-electron
去掉内容安全警告

在项目根目录的 index.html的 head标签内添加

<!-- 移除内容安全警告 -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'">