electron + express 实现 vue 项目客户端部署

写在前面

作为一个前端程序员,如何实现从前端到客户端的跨越,可能是一个很难实现的事。但客户需求千奇百怪,偶尔遇到一个非要客户端的,如何应对?

那Electron可能真是你福音。具体它有哪些功能,可自行官网查看:Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron。这里只谈一谈最近项目中遇到的一种情况:将已有的vue项目打包成客户端

1.创建electron 项目

首先创建一个electron项目:快速入门 | Electron

这里直接使用了脚手架: GitHub - electron/electron-quick-start: Clone to try a simple Electron app

也可以根据官网自己搭建。

执行以下命令安装 脚手架 :

复制代码
npm install 

如果安装过程中卡住,可尝试设置以下环境变量

复制代码
ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"
npm run start 启动

2.创建express项目

为什么要用express 框架?其实直接启动electron+vue的dist包,静态部署也可以。需要的参考这个Electron学习记录(二)-在Electron中使用vue3_electron使用vue-CSDN博客

但项目中一般都以服务的形式部署,静态部署多少有些资源读取的问题。这里增加了express框架,轻量,方便。

初始化express项目

使用express-generator搭建

复制代码
npm install express-generator -g

express express-project
创建一个名为express-project的项目

把项目整体放到electron项目的根目录。

3.修改配置,打包启动

(1)在main.js 增加express 启动项目,基本可以理解为把exprss-project项目下bin/www的内容迁移打main.js中。

(2)将vue项目的dist包放到exprss-project项目下,比如public目录下。

打包前记得修改.env.production 文件中的后端接口配置,例如:

VUE_APP_BASE_API = '/prod-api'

改为以下形式:

VUE_APP_BASE_API = 'http://{ip}:{port}/prod-api'

(3)修改exprss-project项目下bin/app.js 内容

OK。执行,不出意外的,会自动启动客户端了。

(4)最后一步,打包成软件

package.json中添加

复制代码
  "scripts": {
    "start": "electron .",
    "packager": "electron-packager ./ my-app --platform=win32 --arch=x64 --out=out --icon=assets/app.ico --asar --overwrite --ignore=.git"
  },

执行npm run packager,打包成软件。

这样基本实现了vue项目的客户端化,当然,别忘了起后端服务。

相关推荐
多啦C梦a4 分钟前
《ProtectRoute怎么用?》 前端登录拦截器!React ProtectRoute + 懒加载,从入门到会用
前端·javascript·react.js
sophie旭6 分钟前
《深入浅出react》总结之 10.3 Commit阶段流程探秘
前端·react.js·源码阅读
绅士玖7 分钟前
🔍 深入理解React的useContext Hook:从原理到实战
前端·react.js
植物昂光8 分钟前
基于Node.js的微博热榜抓取与展示开发记录
前端·node.js
面包蟹9 分钟前
JavaScript 的深浅拷贝
前端·javascript
再见了那维莱特9 分钟前
React Server API + Vite 简单实现SSR【根据文档提供的案例进行分析】
前端
前端一小卒11 分钟前
《深入浅出 React 19:AI 视角下的源码解析与进阶》- diff算法核心
前端·javascript·react.js
半世浮生14 分钟前
uniapp开发微信路由踩坑
前端·uni-app
Moment16 分钟前
通过 Mac 自动的 say 命令学习粤语真的太好玩了 😏😏😏
前端·javascript·后端
JarvanMo18 分钟前
我差点放弃移动开发(以及是什么让我回来了)
前端