基于Electron+Vite快速构建Vue3桌面应用

 更新时间:2023年07月02日 09:51:59   作者:麦忙  
这篇文章主要介绍了如何基于Electron和Vite快速构建Vue3桌面应用,本文主要技术栈就是Vue3、vite、Electron,文中有详细的代码示例,需要的朋友可以参考下

前言

随之Vite的不断地受欢迎,大家应该都在使用了,最近公司需要开发一个桌面的视频播放器,这就涉及到了Electron,它可以帮助我们快速的开发一个桌面级别的应用,下面是我搭建的基本架子,主要技术栈就是Vue3 vite Electron

创建应用

我们利用Vite 构建Vue3项目,直接一行命令, 我这里选择yarn,当然npm pnpm这些都是可以的,看自己习惯了

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

进入项目下载依赖,运行项目

// 进入项目
cd electron-demo
// 下载依赖
yarn
// 运行项目
yarn dev

这些都是比较熟悉的!不出意外的项目启动成功

下载Electron

正菜来了,正事开启踩坑之旅

yarn add electron

由于国内下载Electron 是无法下载,要么报错,要么就是卡住不动,解决办法如下 将Electron设置国内镜像后,可以加快文件的下载速度,下面是 electron的国内镜像设置。

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的主进程文件,方便后期管理,里面的具体配置大家可以去ELectron 官网了解

// 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插件需要进行打包编译的文件入口。

yarn add vite-plugin-electron -D

打开vite.config.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.VITE_DEV_SERVER_URL){
    win.loadURL(process.env.VITE_DEV_SERVER_URL)
  }else {
    win.loadFile(join(__dirname,'index.html'))
  }
}
app.whenReady().then(createdWindow)
  • 运行项目 yarn dev

我们可以看到新增一个文件夹,这里就是编译过后的主线程的代码,同时会有一个报错

由于electron主进程是使用的node环境,而默认情况下,Node.js 使用的是 CommonJS 模块规范,而 import 语句属于 ECMAScript 模块规范,两者不兼容。所以需要使用编译为 CommonJS 规范的dist-electron/main.js作为main属性的入口文件,否则会报es6语法错误。

这个时候我们将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"
  }
}

这个时候我们就能看到一个桌面级别的成品了

  • 终断乱码

接下来还会存在一个问题就是主进程里在终断打印中文乱码的问题,这里提供一个解决办法

解决办法

chcp 65001 是 Windows 系统下的一个命令,用于将控制台的代码页设置为 UTF-8 编码。在默认情况下,Windows 控制台使用的是 GBK 或者其他本地编码,导致在控制台中输出中文等非 ASCII 字符时可能会出现乱码。 使用 chcp 65001 命令可以将控制台的代码页设置为 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)

最后一步:将下面代码复制到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/"
    }
  }

成果

执行yarn build就会看到文件根目录新增了一个我们设置的release文件,里面存放的就是我们的软件,点击安装后就大公告成了

这就是基本的搭建了,后面可能会继续更新electron的相关知识!!!

到此这篇关于基于Electron+Vite快速构建Vue3桌面应用的文章就介绍到这了,更多相关Electron+Vite Vue3桌面应用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue.js使用v-show和v-if的注意事项

    Vue.js使用v-show和v-if的注意事项

    这篇文章一开始先对Vue.js中v-show和v-if两者的区别进行了简单的介绍,而后通过图文详细给大家介绍了Vue.js使用v-show和v-if注意的事项,有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2016-12-12
  • 解决vue单页面修改样式无法覆盖问题

    解决vue单页面修改样式无法覆盖问题

    这篇文章主要介绍了vue单页面修改样式无法覆盖问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • Vue基于Element-ui实现表格弹窗组件

    Vue基于Element-ui实现表格弹窗组件

    这篇文章主要为大家详细介绍了Vue基于Element-ui实现表格弹窗组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue router安装及使用方法解析

    Vue router安装及使用方法解析

    这篇文章主要介绍了Vue router安装及使用方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-12-12
  • vue 使用ref 让父组件调用子组件的方法

    vue 使用ref 让父组件调用子组件的方法

    这篇文章主要介绍了vue 使用ref 让父组件调用子组件的方法,需要的朋友可以参考下
    2018-02-02
  • 使用vuetify实现全局v-alert消息通知的方法

    使用vuetify实现全局v-alert消息通知的方法

    使用强大的Vuetify开发前端页面,结果发现官方没有提供简便的全局消息通知组件,所以自己动手写了一个简单的组件,接下来通过本文给大家介绍使用vuetify实现全局v-alert消息通知的详细代码,感兴趣的朋友跟随小编一起看看吧
    2024-02-02
  • Vue3+TS+Vite+NaiveUI搭建一个项目骨架实现

    Vue3+TS+Vite+NaiveUI搭建一个项目骨架实现

    本文主要介绍了Vue3+TS+Vite+NaiveUI搭建一个项目骨架实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • element-ui中el-form-item内的el-select该如何自适应宽度

    element-ui中el-form-item内的el-select该如何自适应宽度

    自从用了element-ui,确实好用,该有的组件都有,但是组件间的样式都固定好了,下面这篇文章主要给大家介绍了关于element-ui中el-form-item内的el-select该如何自适应宽度的相关资料,需要的朋友可以参考下
    2022-11-11
  • 一文快速详解前端框架 Vue 最强大的功能

    一文快速详解前端框架 Vue 最强大的功能

    组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。这篇文章主要介绍了一文快速详解前端框架 Vue 最强大的功能,需要的朋友可以参考下
    2019-05-05
  • 解决vue侦听器watch,调用this时出现undefined的问题

    解决vue侦听器watch,调用this时出现undefined的问题

    这篇文章主要介绍了解决vue侦听器watch,调用this时出现undefined的问题,具有很好的参考
    2020-10-10

最新评论