特点：干预最少，代码最少，依赖最新
主要是在window下进行，linux参照执行
搭建环境
安装
- 安装nodejs
- 安装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
开始实战
-
思路 先搭建
vite+vue
定位到一个工作目录，比如D:\www，先按照vite的手册创建项目
yarn create @vitejs/app electron-vite-vue --template vue
cd electron-vite-vue
yarn
yarn dev
命令行显示
这时候，在浏览器里可以看到页面。vite+vue搭建好了
浏览器里看到
-
思路 加入
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，暂时空白。
-
思路开发模式下，先vite生成，在通过electron
具体代码就是main.js中的
win.loadURL('localhost:3000')
启动vite
vite
新开一个命令行，启动electron
electron .
electron显示效果
-
思路 按照electron最新的思路，vue页面中不能使用nodejs和electron，electron手册中要求通过
preload.js隔离vue页面和main.js的交互。
这是electron手册中的原文
This feature is incredibly useful for two main purposes:
- By exposing
ipcRendererhelpers 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
windowglobal 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
<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页面。
- 存在路径问题：
vite默认生成的url为绝对路径，用electron包裹时，会出现路径问题，解决办法为，在vite配置文件中加入base设置。
export default defineConfig({
//...
base: './', // 这里决定了生成的html采用相对路径
//...
})
整理，发到gitee上，供大家下载。
