一. 简介

首先，介绍下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 vite

2. 创立我的项目

创立命令如下：

yarn create vite <your-vue-app-name> --template vue

此处创立一个我的项目，名为kuari。

yarn create vite kuari --template vue

3. 进入且运行

进入我的项目，在运行前须要先装置下依赖。

cd kuariyarn installyarn dev

在运行命令敲下的一瞬间，简直是曾经在运行了，不愧是vite。此时依照输入，关上地址预览，即可看到初始化页面。

至此一个根底的vite我的项目创立实现。

三. 配置Electron

1. 官网文档

在Electron官网的疾速入门文档中，有官网给出的利用html、javascript、css来创立一个electron利用的案例，vite+electron的计划也借鉴其中。

2. 装置

首先装置electron至vite利用。目前electron的版本为^15.1.2,。

yarn add --dev electron

3. 配置文件

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桌面利用