2、学习笔记electron13 + vue3 + vite2 (一)

记录基于electron13 + vue3 +vite2 的搭建

由于vite的运行、打包、热更新，与webpack数倍差距，

所以打算使用vite进行一个环境的搭建

1、vue3的搭建

npm init @vitejs/app project-name
cd project-name
npm install 
npm run dev

浏览器里可以看到页面。vite+vue就搭建好了

2、electron安装

安装electron
这里使用镜像
根目录添加一个 .npmrc文件
加上electron_mirror=http://cdn.npm.taobao.org/dist/electron/
npm install electron --save-dev
npm install electron-builder --save-dev  electron 打包

3、package.json

"name": "electron",
  "version": "0.0.1",
  "main": "main.js",
  "license": "MIT",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "start": "electron ."
    "dist": "electron-builder"
  }

4、vite.config.ts 配置

import { defineConfig } from 'vite'
import {join ,resolve} from 'path'
import vue from '@vitejs/plugin-vue'
import dotenv from 'dotenv';
const root = join(__dirname, 'src/render')
export default defineConfig({
  root,
  base:'./',
  plugins: [
    vue(),
  ],
  server:{
    port:3000,
    proxy:{}
  }
  outDir: join(__dirname, 'dist/render'),//指定输出路径(相对于项目根目录)
  assetsDir: 'assets', // 指定生成静态资源的存放路径（相对于build.outDir）
  emptyOutDir: true,
  minify: false,
  commonjsOptions: {},
  sourcemap: true,
})

简单的vite配置，更多配置可查看官方文档

5、electron 主文件main.js

'use strict';
var path = require('path');
/**
 * electron 主文件
 */
const  { app, BrowserWindow ,session  }  = require('electron');
 let win;
 function createWin() {
   // 创建浏览器窗口
   win = new BrowserWindow({
     width:1920,
     height:1080,
     useContentSize:true, 
     webPreferences: {
      nodeIntegrationInWorker :true,
       nodeIntegration: true,
       contextIsolation: false,
     },
   });

   const URL = app.isPackaged
   ? path.join(__dirname, '../render/index.html') // vite 构建后的静态文件地址
   : `http://localhost:${process.env.PORT}`; // vite 启动的服务器地址
  app.isPackaged ? win?.loadFile(URL) : win?.loadURL(URL);
 }
 app.whenReady().then(() => {
  app.on('activate',  ()=>{
    // 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) createWin();
  });
});

// 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();
});

/
*此处为安装vue-devtools 扩展,vue3的vue-devtools需要使用vue-devtools beta版本
 官方文档 http://www.electronjs.org/docs/tutorial/devtools-extension
 安装之后若提示警告，可更改vue-devtools项目中的manifest.json，删除掉与报错内容有关的内容即可
*/
app.on('ready',async ()=>{
  if(!app.isPackaged){
    //install vue devtool
    try {
      const devpath = 'D:/vue-devtools/vue3-devtools';
      await session.defaultSession.loadExtension(devpath);
    } catch (e) {
      console.error('Vue Devtools failed to install:', e);
    }
  }
  createWin();
});

另起终端，运行electron , 一个简单的electron环境就搭建好了

PS：Electron 作为前端标配的桌面开发工具，@vue-cli可以使用electron-vue，但是使用的是vue2
但是 Vite 这块并没提供，毕竟vite定位是和 webpack 那样的通用构建工具，连vue都没集成

这里分项一个大佬写的vite插件
electron-vue-vite