vue3 + vite + electron快速搭建，避免趟坑！使用vue3+vite+electron快速搭建你个属于

1. 安装node.js

2. 创建一个新的vue3+vite项目

  npm create vite@latest my-electron-app

3. 安装 Electron 和对应vite集成 Electron插件

此处使用cnpm进行依赖下载，cnpm下载方式如下:

  npm install -g cnpm --registry=https://registry.npm.taobao.org


  cnpm i electron vite-plugin-electron vite-plugin-electron-renderer electron

4. 设置Electron入口文件

在项目根目录下创建一个新的electron文件夹，并在其中创建index.ts作为Electron主进程的入口文件。

import {app,BrowserWindow} from 'electron'
import { join } from 'path'

const createdWindow = () => {
  const win = new BrowserWindow({
    width:900,
    height:600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation:false,
      webviewTag:true //如果你使用webview加载网页方式需要添加此标签
    }
  })
  //不添加有可能导致运行白屏
  if(process.env.NODE_ENV !='development'){
    win.loadFile(join(__dirname,'../index.html'))
  }else {
    win.loadFile("index.html") 
  }
}


app.whenReady().then(createdWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createdWindow();
  }
});

5. 配置vite

在项目根目录下的vite.config.ts或vite.config.js文件中，引入vite-plugin-electron和vite-plugin-electron-renderer

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'
import render from 'vite-plugin-electron-renderer'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    electron({
      entry:"electron/index.ts"
    }),
    render(),
  ],
  base:'./',
  build:{
    outDir:'dist'
  }
})

6. 修改package.json

在package.json 增加main字段，去掉type字段。由于Electron主进程使用node环境，默认使用CommonJs规范，而import语句属于ECMAScript模块规范，两者不兼容。所以需要去掉type字段，把运行后产生的dist-electron作为main属性的入口。

7. 启动项目

 npm run dev

完美撒花✿✿ヽ(°▽°)ノ✿

下一章详细说明如何打包我们的vite+electron项目

vue3 + vite + electron快速搭建，避免趟坑！