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