Vue-Electron配置及踩坑

前言

大道至简。太复杂的教程不看。

本篇将记述我创建好Vue3项目之后,用Electron把页面呈现出来的整个过程。会记录一些踩坑。

首先,Electron官网可以参考。但是它只是作出了一个普通的html结构该如何用Electron呈现出来,vue的配置有一些变更。

参考这篇文档就好了。

具体步骤

步骤一:创建一个Vue项目(不赘述);

步骤二:下载Electron包:

步骤三:在根目录下创建Electron文件夹,里面创建一个Electron的入口文件:main.js,内容如下。app控制Electron的生命周期,而BrowserWindow用于控制其窗口。所以我们可以更改一个自己认为合适的桌面应用尺寸:

javascript 复制代码
const { app, BrowserWindow } = require('electron')
// const path = require("path")

const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 1000,
    height: 700,
  })

  // 主要改了这里
  // mainWindow.loadFile(path.join(__dirname, "./index.html"));
  // 使用 loadURL 加载 http://localhost:3004 ,也就是我们刚才创建的 Vue 项目地址
  // 3004 改为你 Vue 项目的端口号
  mainWindow.loadURL("http://localhost:8080/");
}

app.whenReady().then(() => {
  createWindow()
})

步骤四:在vue的package.JSON中配置Electron的入口以及指令,这里需要注意,main后面跟的是刚刚配置Electron的入口文件main.js的位置,而electron后面的命令是:

复制代码
electron .

步骤五:运行项目

先跑vue项目,再跑electron,开两个终端,分别执行:

复制代码
npm run serve

npm run electron

最后的效果:

如果想在electron应用内部调试控制台,快捷键:ctrl+shift+i:

踩坑部分

1.下载的东西太多,有的文档会要求下载各种文件,而且npm的源不一定会有那个对应的包。其实初期不需要那么多的东西,可以直接按照上面的步骤来;

2.main.js文件中的地址需要根据自己的本地运行来配置,一般Vue的端口号是8080,vite默认的端口号又不太一样。所以需要注意。

3.如果按照上述步骤走还有bug,可以检查下electron的入口文件是否地址是对的。以及包的版本问题。如果实在有问题也可以评论区见~

相关推荐
IT_陈寒10 分钟前
React 性能优化必杀技:这5个Hook组合让你的应用提速50%!
前端·人工智能·后端
再吃一根胡萝卜26 分钟前
Git 强制推送指南:新手必读的「危险操作」解析
前端
诚实可靠王大锤40 分钟前
react-native项目通过华为OBS预签名url实现前端直传
前端·react native·华为
Monly211 小时前
Vue:下拉框多选影响行高
前端·javascript·vue.js
是罐装可乐1 小时前
前端架构知识体系:Source Map 的用法和全面解析
前端·映射·前端架构·代码安全·源码地图·source-map
小桥风满袖1 小时前
极简三分钟ES6 - ES8中对象扩展
前端·javascript
武昌库里写JAVA1 小时前
Mac下Python3安装
java·vue.js·spring boot·sql·学习
代码的余温1 小时前
Web服务器VS应用服务器:核心差异解析
运维·服务器·前端
一涯1 小时前
日常小常识记录
前端
那一抹阳光多灿烂1 小时前
CSS 编码规范
前端·css