特點(diǎn)：干預(yù)最少，代碼最少，依賴最新

主要是在window下進(jìn)行，linux參照?qǐng)?zhí)行

搭建環(huán)境

安裝

1. 安裝nodejs
2. 安裝git

配置

明確全局包位置，自定義的，比如 D:\Server\cache\javascript 我們用 GLOBAL_PATH 標(biāo)記。
設(shè)置NPM

npm config edit
# 在彈出的ini文件中修改：
cache=GLOBAL_PATH
ELECTRON_BUILDER_BINARIES_MIRROR=http://npm.taobao.org/mirrors/electron-builder-binaries/
electron_mirror=https://cdn.npm.taobao.org/dist/electron/
registry=https://registry.npm.taobao.org/

安裝yarn

npm i -g yarn

yarn config set cache-folder GLOBAL_PATH

安裝vite

// npm i -g vite
yarn global add vite 

開(kāi)始實(shí)戰(zhàn)

1. 思路 先搭建vite+vue
   定位到一個(gè)工作目錄，比如 D:\www，先按照vite的手冊(cè)創(chuàng)建項(xiàng)目

yarn create @vitejs/app electron-vite-vue --template vue
cd electron-vite-vue
yarn
yarn dev

命令行顯示

這時(shí)候，在瀏覽器里可以看到頁(yè)面。vite+vue搭建好了

瀏覽器里看到

2. 思路 加入electron，按照electron的手冊(cè)執(zhí)行

yarn add --dev electron

在項(xiàng)目根目錄下的package.json中加入

{
  "name": "electron-vite-vue",
  "version": "1.0.0",
  "main": "main.js",
  "license": "MIT",
  "scripts": {
    "start": "electron ."
  }
}

整個(gè)文件大致是這樣的

{
  "name": "electron-vite-vue",
  "version": "0.0.1",
  "main": "main.js",
  "license": "MIT",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "start": "electron ."
  },
  "dependencies": {
    "vue": "^3.0.5"
  },
  "devDependencies": {
    "electron": "^13.1.6",
    "@vitejs/plugin-vue": "^1.2.4",
    "@vue/compiler-sfc": "^3.0.5",
    "vite": "^2.4.0"
  }
}

在項(xiàng)目根目錄下新建main.js

const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  win.loadURL('localhost:3000')
}
app.whenReady().then(() => {
  createWindow()
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  }
)})
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

在項(xiàng)目根目錄下新建preload.js，暫時(shí)空白。

3. 思路開(kāi)發(fā)模式下，先vite生成，在通過(guò)electron
   具體代碼就是main.js中的

win.loadURL('localhost:3000')

啟動(dòng)vite

vite

新開(kāi)一個(gè)命令行，啟動(dòng)electron

electron .

electron顯示效果

4. 思路 按照electron最新的思路，vue頁(yè)面中不能使用nodejs和electron，electron手冊(cè)中要求通過(guò)preload.js隔離vue頁(yè)面和main.js的交互。

這是electron手冊(cè)中的原文

This feature is incredibly useful for two main purposes:

• By exposing ipcRenderer helpers to the renderer, you can use inter-process communication (IPC) to trigger main process tasks from the renderer (and vice-versa).
• If you're developing an Electron wrapper for an existing web app hosted on a remote URL, you can add custom properties onto the renderer's window global that can be used for desktop-only logic on the web client's side.

測(cè)試一個(gè)，在preload.js中添加

const { contextBridge } = require('electron')
// 在vue頁(yè)面中引用window.$electron.titile，獲得 'electron-vite-vue'
contextBridge.exposeInMainWorld('$electron', {
    title: 'electron-vite-vue'
})

修改src/app.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <!--修改--><HelloWorld :msg="message" />
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue'
// 引用preload.js中定義的常量
const message = window.$electron.title

// This starter template is using Vue 3 experimental <script setup> SFCs
// Check out https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md
</script>

刷新electron頁(yè)面。

5. 存在路徑問(wèn)題：
   vite默認(rèn)生成的url為絕對(duì)路徑，用electron包裹時(shí)，會(huì)出現(xiàn)路徑問(wèn)題，解決辦法為，在vite配置文件中加入base設(shè)置。

export default defineConfig({
  //...
  base: './', // 這里決定了生成的html采用相對(duì)路徑
  //...
})

整理，發(fā)到gitee上，供大家下載。