共计 3445 个字符，预计需要花费 9 分钟才能阅读完成。
一. 简介
首先，介绍下 vite 和Electron。
- Vite 是一种新型前端构建工具，可能显著晋升前端开发体验。由尤大推出，其发动静示意“再也回不去 webpack 了 …”
- Electron 是一个应用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到二进制的 Electron 容许您放弃一个 JavaScript 代码代码库并创立 在 Windows 上运行的跨平台利用 macOS 和 Linux——不须要本地开发 教训。
当开始想用 vue 去开发一个桌面利用时，首先去搜寻下，理解到以后如下两种现成计划：
- electron-vue：该我的项目集成度较好，封装较为残缺，中文搜索下来文章较多也是该计划，能够间接上手去应用。然而，问题在于其内置 electron 的版本太低，写文章时看到的版本是 2.0.4，而最新的 electron 版本是 15.1.2。
- Vue CLI Plugin Electron Builder：该计划是集成到到
vue-cli中应用，应用vue add electron-builder后可间接上手，免去了根底配置的步骤。然而其只能在vue-cli下应用，无奈配合vite来应用。
因而，若要应用 vite 和electron，还须要本人来配置。
二. 创立一个 Vite 我的项目
1. 装置 vite
yarn create vite2. 创立我的项目
创立命令如下：
yarn create vite <your-vue-app-name> --template vue此处创立一个我的项目，名为 kuari。
yarn create vite kuari --template vue3. 进入且运行
进入我的项目，在运行前须要先装置下依赖。
cd kuari
yarn install
yarn dev在运行命令敲下的一瞬间，简直是曾经在运行了，不愧是 vite。此时依照输入，关上地址预览，即可看到初始化页面。
至此一个根底的 vite 我的项目创立实现。
三. 配置 Electron
1. 官网文档
在 Electron 官网的疾速入门文档中，有官网给出的利用 html、javascript、css 来创立一个 electron 利用的案例，vite+electron 的计划也借鉴其中。
2. 装置
首先装置 electron 至 vite 利用。目前 electron 的版本为^15.1.2,。
yarn add --dev electron3. 配置文件
1）vite.config.js
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path' // 新增
// https://vitejs.dev/config/
export default defineConfig({base: path.resolve(__dirname, './dist/'), // 新增
plugins: [vue()]
})2）main.js
创立一个新的文件 main.js，须要留神的是，该内容中index.html 的加载门路跟 electron 官网给的配置不同。
// main.js
// 管制利用生命周期和创立原生浏览器窗口的模组
const {app, BrowserWindow} = require('electron')
const path = require('path')
function createWindow () {
// 创立浏览器窗口
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {preload: path.join(__dirname, 'preload.js')
}
})
// 加载 index.html
mainWindow.loadFile('dist/index.html') // 此处跟 electron 官网门路不同，须要留神
// 关上开发工具
// mainWindow.webContents.openDevTools()}
// 这段程序将会在 Electron 完结初始化
// 和创立浏览器窗口的时候调用
// 局部 API 在 ready 事件触发后能力应用。app.whenReady().then(() => {createWindow()
app.on('activate', function () {
// 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其余
// 关上的窗口，那么程序会从新创立一个窗口。if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})
// 除了 macOS 外，当所有窗口都被敞开的时候退出程序。因而，通常对程序和它们在
// 任务栏上的图标来说，该当放弃沉闷状态，直到用户应用 Cmd + Q 退出。app.on('window-all-closed', function () {if (process.platform !== 'darwin') app.quit()})
// 在这个文件中，你能够蕴含应用程序残余的所有局部的代码，// 也能够拆分成几个文件，而后用 require 导入。3）preload.js
创立一个新的文件preload.js。
// preload.js
// 所有 Node.js API 都能够在预加载过程中应用。// 它领有与 Chrome 扩大一样的沙盒。window.addEventListener('DOMContentLoaded', () => {const replaceText = (selector, text) => {const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const dependency of ['chrome', 'node', 'electron']) {replaceText(`${dependency}-version`, process.versions[dependency])
}
})4）package.json
为了确保可能运行相干 electron 的命令，须要批改 package.json 文件。
首先须要去设置 main 属性，electron 默认会去在开始时寻找我的项目根目录下的 index.js 文件，此处咱们应用的是main.js，所以须要去定义下。
// package.json
{
"name": "kuari",
"version": "0.0.0",
"main": "main.js", // 新增
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"dependencies": {"vue": "^3.2.16"},
"devDependencies": {
"@vitejs/plugin-vue": "^1.9.3",
"electron": "^15.1.2",
"vite": "^2.6.4"
}
}
最初咱们须要新增 electron 的运行命令。
// package.json
{
"name": "kuari",
"version": "0.0.0",
"main": "main.js",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"electron:serve": "electron ." // 新增
},
"dependencies": {"vue": "^3.2.16"},
"devDependencies": {
"@vitejs/plugin-vue": "^1.9.3",
"electron": "^15.1.2",
"vite": "^2.6.4"
}
}四. 运行
间接在终端输出如下命令：
yarn electron:serve接着咱们就能够看到咱们桌面利用就进去咯！
五. 最初
之前做我的项目始终用的 Vue CLI Plugin Electron Builder，这次有个我的项目先用 electron 开发一下，推一波看看，前期看状况 swift 从新开发一个 mac 的桌面利用。也刚好尝尝鲜，始终没有机会试试 vite。
electron 这个东东的确很不便，就是打包进去的利用体积太大，真的是硬伤啊。这次指标人群首先是 windows 用户，所以上 electron 吧！
六. 博客原文地址
Vite+Electron 疾速构建一个 VUE3 桌面利用
