[electron] 一 vue3.2+vite+electron 项目集成

一 开发环境

系统:windows

开发工具: git , vscode,termial

环境依赖: node, npm

二 步骤

2.1 通过vite 创建vue项目

通过 终端执行命令,选择 模板 vue

npm init vite 

cd 项目目录
npm install 
npm run dev

2.2 集成 electron

  1. 安装electron依赖  

npm install  electron --save-dev 

若安装出现 `RequestError: self-signed certificate in certificate chain` 错误可使用 下面命令,(需要在git_bash或者支持linux命令终端中执行,)

NODE_TLS_REJECT_UNAUTHORIZED=0  npm install  electron --save-dev
  1. 安装 vite-plugin-electron,这个需要安装再 devDependencies中

使用说明 https://github.com/electron-vite/vite-plugin-electron

npm i vite-plugin-electron -D
  1. 项目根目录下创建electron 文件夹,用于存放electron相关的代码

  1. 修改 vite.config.js,支持 electron

# 新增部分
import electron from 'vite-plugin-electron'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import electron from 'vite-plugin-electron'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
    electron([
      {
        entry:"electron/main/index.ts",
       vite:{
          build: {
            outDir: "dist/electron/main"
          }
        }
      }
    ],)
  ],
})
  1. 修改package.json

去除 "type": "module", 新增 "main":"dist/electron/main/index.js",

  1. 通过 npm run dev 即可预览

三 验证

接下来看 electron 和vue怎么通信 ?

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值