最新简约实效vite+electron+vue实战

特点：干预最少，代码最少，依赖最新

主要是在window下进行，linux参照执行

搭建环境

安装

1. 安装nodejs
2. 安装git

配置

明确全局包位置，自定义的，比如 D:\Server\cache\javascript 我们用 GLOBAL_PATH 标记。
设置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 

开始实战

1. 思路 先搭建vite+vue
   定位到一个工作目录，比如 D:\www，先按照vite的手册创建项目

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

命令行显示

这时候，在浏览器里可以看到页面。vite+vue搭建好了

浏览器里看到

2. 思路 加入electron，按照electron的手册执行

yarn add --dev electron

在项目根目录下的package.json中加入

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

整个文件大致是这样的

{
  "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"
  }
}

在项目根目录下新建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()
  }
})

在项目根目录下新建preload.js，暂时空白。

3. 思路开发模式下，先vite生成，在通过electron
   具体代码就是main.js中的

win.loadURL('localhost:3000')

启动vite

vite

新开一个命令行，启动electron

electron .

electron显示效果

4. 思路 按照electron最新的思路，vue页面中不能使用nodejs和electron，electron手册中要求通过preload.js隔离vue页面和main.js的交互。

这是electron手册中的原文

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.

测试一个，在preload.js中添加

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

修改src/app.vue

刷新electron页面。

5. 存在路径问题：
   vite默认生成的url为绝对路径，用electron包裹时，会出现路径问题，解决办法为，在vite配置文件中加入base设置。

export default defineConfig({
  //...
  base: './', // 这里决定了生成的html采用相对路径
  //...
})

整理，发到gitee上，供大家下载。