快捷導(dǎo)航

基于Electron+Vite快速構(gòu)建Vue3桌面應(yīng)用

更新時(shí)間：2023年07月02日 09:51:59 作者：麥忙

這篇文章主要介紹了如何基于Electron和Vite快速構(gòu)建Vue3桌面應(yīng)用，本文主要技術(shù)棧就是Vue3、vite、Electron，文中有詳細(xì)的代碼示例,需要的朋友可以參考下

前言

隨之Vite的不斷地受歡迎，大家應(yīng)該都在使用了，最近公司需要開(kāi)發(fā)一個(gè)桌面的視頻播放器，這就涉及到了Electron,它可以幫助我們快速的開(kāi)發(fā)一個(gè)桌面級(jí)別的應(yīng)用，下面是我搭建的基本架子，主要技術(shù)棧就是Vue3 vite Electron

創(chuàng)建應(yīng)用

我們利用Vite 構(gòu)建Vue3項(xiàng)目，直接一行命令, 我這里選擇yarn,當(dāng)然npm pnpm這些都是可以的，看自己習(xí)慣了

# yarn yarn create vite electron-demo --template vue

進(jìn)入項(xiàng)目下載依賴，運(yùn)行項(xiàng)目

// 進(jìn)入項(xiàng)目
cd electron-demo
// 下載依賴
yarn
// 運(yùn)行項(xiàng)目
yarn dev

這些都是比較熟悉的！不出意外的項(xiàng)目啟動(dòng)成功

下載Electron

正菜來(lái)了，正事開(kāi)啟踩坑之旅

yarn add electron

由于國(guó)內(nèi)下載Electron 是無(wú)法下載，要么報(bào)錯(cuò)，要么就是卡住不動(dòng)，解決辦法如下將Electron設(shè)置國(guó)內(nèi)鏡像后，可以加快文件的下載速度，下面是 electron的國(guó)內(nèi)鏡像設(shè)置。

pnpm config set electron_mirror=https://npm.taobao.org/mirrors/electron/
pnpm config set electron_builder_binaries_mirror=https://npm.taobao.org/mirrors/electron-builder-binaries/

配置

修改package.json

首先在根目錄新建 electron / index.js

這里存放的就是Electron的主進(jìn)程文件，方便后期管理，里面的具體配置大家可以去ELectron 官網(wǎng)了解

// electron / index.js
import { app, BrowserWindow } from 'electron';
import { join } from 'path'
const createdWindow = () => {
  const win = new BrowserWindow({
    width:900,
    height:600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation:false,
    }
  })
}
app.whenReady().then(createdWindow)

配置vite-plugin-electron插件需要進(jìn)行打包編譯的文件入口。

yarn add vite-plugin-electron -D

打開(kāi)vite.config.js引入執(zhí)行配置，將入口文件寫(xiě)入，就是我們剛剛新建的主線程文件

import { app, BrowserWindow } from 'electron';
import { join } from 'path'
const createdWindow = () => {
  const win = new BrowserWindow({
    width:900,
    height:600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation:false,
    }
  })
  if(process.env.VITE_DEV_SERVER_URL){
    win.loadURL(process.env.VITE_DEV_SERVER_URL)
  }else {
    win.loadFile(join(__dirname,'index.html'))
  }
}
app.whenReady().then(createdWindow)

運(yùn)行項(xiàng)目 yarn dev

我們可以看到新增一個(gè)文件夾，這里就是編譯過(guò)后的主線程的代碼，同時(shí)會(huì)有一個(gè)報(bào)錯(cuò)

由于electron主進(jìn)程是使用的node環(huán)境，而默認(rèn)情況下，Node.js 使用的是 CommonJS 模塊規(guī)范，而 import 語(yǔ)句屬于 ECMAScript 模塊規(guī)范，兩者不兼容。所以需要使用編譯為 CommonJS 規(guī)范的dist-electron/main.js作為main屬性的入口文件，否則會(huì)報(bào)es6語(yǔ)法錯(cuò)誤。

這個(gè)時(shí)候我們將packjson中的type字段去除,將入口文件改為dist-electron/main.js

{
  "name": "electorn-demo",
  "private": true,
  "version": "0.0.0",
  "main": "dist-electron/index.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "electron": "^25.1.0",
    "vite": "^4.3.9",
    "vite-plugin-electron": "^0.11.2"
  }
}

這個(gè)時(shí)候我們就能看到一個(gè)桌面級(jí)別的成品了

終斷亂碼

接下來(lái)還會(huì)存在一個(gè)問(wèn)題就是主進(jìn)程里在終斷打印中文亂碼的問(wèn)題，這里提供一個(gè)解決辦法

解決辦法

chcp 65001 是 Windows 系統(tǒng)下的一個(gè)命令，用于將控制臺(tái)的代碼頁(yè)設(shè)置為 UTF-8 編碼。在默認(rèn)情況下，Windows 控制臺(tái)使用的是 GBK 或者其他本地編碼，導(dǎo)致在控制臺(tái)中輸出中文等非 ASCII 字符時(shí)可能會(huì)出現(xiàn)亂碼。使用 chcp 65001 命令可以將控制臺(tái)的代碼頁(yè)設(shè)置為 UTF-8 編碼，以便正確顯示中文等非 ASCII 字符。

打包Electron

需要安裝electron-builder cross-env

yarn add electron-builder cross-env -D

修改packjsons的文件

"build": "vite build && electron-builder"

修改electron/index.js,讓打包后的軟件可以正確加載

import { app, BrowserWindow } from 'electron';
import { join } from 'path'
const createdWindow = () => {
  const win = new BrowserWindow({
    width:900,
    height:600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation:false,
    }
  })
  if(process.env.NODE_ENV !='development'){
    win.loadFile(join(__dirname,'../dist/index.html'))
  }else {
    win.loadURL(process.env.VITE_DEV_SERVER_URL)
  }
}
app.whenReady().then(createdWindow)

最后一步：將下面代碼復(fù)制到packjson.json 文件中

"build": {
    "appId": "com.my-website.my-app",
    "productName": "MyApp",
    "copyright": "Copyright ? 2021 kuari",
    "mac": {
      "category": "public.app-category.utilities"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    },
    "files": [
      "dist/**/*",
      "dist-electron/**/*"
    ],
    "directories": {
      "buildResources": "assets",
      "output": "release/"
    }
  }

成果

執(zhí)行yarn build就會(huì)看到文件根目錄新增了一個(gè)我們?cè)O(shè)置的release文件，里面存放的就是我們的軟件，點(diǎn)擊安裝后就大公告成了

這就是基本的搭建了，后面可能會(huì)繼續(xù)更新electron的相關(guān)知識(shí)!!!

到此這篇關(guān)于基于Electron+Vite快速構(gòu)建Vue3桌面應(yīng)用的文章就介紹到這了,更多相關(guān)Electron+Vite Vue3桌面應(yīng)用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: