当前位置: 首页 > article >正文

可能是NextJs(使用ssr、api route)打包成桌面端(nextron、electron、tauri)的最佳解决方式

可能是NextJs(使用ssr、api route)打包成桌面端(nextron、electron、tauri)的最佳解决方式

前言

在我使用nextron(next+electron)写了一个项目后打包发现nextron等一系列桌面端框架在生产环境是不支持next的ssr也就是api route功能的这就导致我非常难受,耗费了小半个月结果告诉我只能使用NextJs的单页面模式也就是静态导出模式(因为在开发环境是支持ssr/api route的就导致我以为可以使用)这让我无法理解nextron的意义,我认为api route是NextJs作为全栈框架非常重要的功能,阉割后只能算作react plus,于是不甘心的我就开始在网上查找解决方案。

经历

>> 我在github找到了几个自称是可以在next+electron中使用ssr/api route的代码模板,但是在我不断的是错后得出这些代码模板或多或少都有问题,并不能正常打包,唯一一个让我打包成功的显示next-auth没有生效,询问作者怎么解决,作者告诉我:他不知道,这只是一个模板需要我自己去debug(流泪)。

>>为什么我不抛弃api route使用NextJs(csr)+其他后端?因为我使用了next-auth,这与我的项目不可分割,并且next-auth与api route是绑定的。再者我使用NextJs的缘由就是因为其api route能让我快速搭建全栈项目,若是阉割我还不如不用NextJs直接使用react。

>>之后我打算将NextJS的csr与ssr部分分开,在服务端部署ssr部分,桌面端打包csr部分,然后通过在网页端登录获取个人的_id,然后通过_id登录桌面端(将登录功能分割到网页端),但是依旧失败,因为next-auth要求ssr+csr绑定,如果分割只能去掉next-auth。

>>就在我准备使用下下策:将nextron中的NextJs部分提取成网页然后通过iframe(iframe真的很垃圾,是没有办法的办法)嵌套在electron中进行打包的时候它出现了:

tw93/Pake: 🤱🏻 Turn any webpage into a desktop app with Rust. 🤱🏻 利用 Rust 轻松构建轻量级多端桌面应用

Pake:一款基于Rust语言和Tauri框架的桌面应用开发框架,可以将网页内容转化为小巧玲珑的桌面应用。

它可以将任何网页直接打包成桌面端,所以我们只需要将NextJs部署然后通过Pake打包即可

省流

Pake的部署及其简单,你只需要以下几步:

  1. 安装rust

    直接去官网安装,点击exe安装时会出现选项,一直选择1即可,实在不会网上教程也很多随便找一个就行。

  2. 打开你的管理员终端输入:

    npm i -g pake-cli

    安装依赖,这边不建议使用淘宝镜像,因为我使用淘宝镜像出现了问题。

  3. 安装成功后输入:

    pake url —name yourname

    url就是你想打包的网页的网址,而yourname是你想给你应用起的名字。

成功之后会显示打包应存储的路径,找到路径打开安装即可。

最后的最后,感谢Pake!!!


http://www.kler.cn/news/365931.html

相关文章:

  • 淘宝API的实战应用:数据驱动增长,实时监控商品信息是关键
  • uniapp uview 上传图片,数据以formData + File 形式传输
  • Django项目实战-图书管理系统之项目搭建
  • vue2 a-input输入框使用正则限制为数字、英文及中文,出现吞字符和英文字符打断问题
  • SLAM|1. 相机投影及相机畸变
  • Flink 状态精准一次性特性
  • 浅谈人工智能之基于LLaMA-Factory进行Llama3微调
  • 2024.7最新子比主题zibll7.9.2开心版源码+授权教程
  • 08 设计模式-结构型模式-过滤器模式
  • Qt之hello world
  • SpringBoot面试热题
  • 麒麟v10 arm64 部署 kubesphere 3.4 修改记录
  • C#与Sqlite数据库
  • 01. 初识C++
  • 钉钉录播抓取视频
  • UML 总结(基于《标准建模语言UML教程》)
  • HW支持-定时扫描局域网内所有设备MAC不在白名单则邮件提醒
  • winmm劫持详解
  • postman使用——在公司的项目落地回顾总结
  • 【计算机操作系统】课程 作业二 进程与线程 408考研
  • uniapp使用easyinput文本框显示输入的字数和限制的字数
  • WUP-MY-POS-PRINTER 旻佑热敏打印机票据打印uniapp插件使用说明
  • WebGL 3D基础
  • 常见Linux命令笔记
  • 【python爬虫】request发请求时需要携带cookies请求举例
  • 计算机网络:网络层 —— IPv4 协议的表示方法及其编址方法