搭建网站架构怎么做,素材大全,做们作业网站,媒体广告投放平台写在前面
作为一个前端程序员#xff0c;如何实现从前端到客户端的跨越#xff0c;可能是一个很难实现的事。但客户需求千奇百怪#xff0c;偶尔遇到一个非要客户端的#xff0c;如何应对#xff1f;
那Electron可能真是你福音。具体它有哪些功能#xff0c;可自行官网… 写在前面
作为一个前端程序员如何实现从前端到客户端的跨越可能是一个很难实现的事。但客户需求千奇百怪偶尔遇到一个非要客户端的如何应对
那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_MIRRORhttps://npmmirror.com/mirrors/electron/
npm run start 启动 2.创建express项目
为什么要用express 框架其实直接启动electronvue的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 --platformwin32 --archx64 --outout --iconassets/app.ico --asar --overwrite --ignore.git},
执行npm run packager打包成软件。 这样基本实现了vue项目的客户端化当然别忘了起后端服务。
