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的入口文件是否地址是对的。以及包的版本问题。如果实在有问题也可以评论区见~

相关推荐
小old弟4 分钟前
jQuery写油猴脚本报错eslint:no-undef - '$' is not defined
前端
Paramita4 分钟前
实战:使用Ollama + Node搭建本地AI问答应用
前端
一天睡25小时5 分钟前
前端の骚操作代码合集 (二)| 让你的网页变得有趣
前端·javascript
王林不想说话7 分钟前
Zustand状态管理库
前端·javascript
清风ai明月8 分钟前
vue模板语法中使用冒号: 什么时候使用,什么时候不使用呢?
前端·javascript·vue.js
少卿9 分钟前
uniapp run使用指南 - VSCode 开发 Uni-app 项目
前端·vue.js
咪库咪库咪11 分钟前
css进阶:flex
前端
xcsweb11 分钟前
用AI理解前端文件类型
前端
剑亦未配妥12 分钟前
Vue2函数式组件实战:手写可调用的动态组件,适用于toast轻提示、tip提示、dialog弹窗等
前端·vue.js·vue
Enddme12 分钟前
带你了解面试常被问到的ES6+的核心新特性
前端·javascript