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

可能是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.lryc.cn/news/468919.html

相关文章:

  • 二百七十、Kettle——ClickHouse中增量导入清洗数据错误表
  • CentOS6升级OpenSSH9.2和OpenSSL3
  • 2024 年 MathorCup 数学应用挑战赛——大数据竞赛-赛道 A:台风的分类与预测
  • kotlin实现viewpager
  • RabbitMQ最新版本4.0.2在Windows下的安装及使用
  • 东方博宜1180 - 数字出现次数
  • LeetCode: 3274. 检查棋盘方格颜色是否相同
  • datax编译并测试
  • 2-133 基于matlab的粒子群算法PSO优化BP神经网络
  • 复盘秋招22场面试(四)形势重新评估与后续措施
  • 揭开C++ STL的神秘面纱之string:提升编程效率的秘密武器
  • 用人工智能,应该怎么掏钱?
  • 【Axure高保真原型】移动案例
  • Bytebase 3.0.0 - AI 助手全面升级
  • php基础:数据类型、常量、字符串
  • Discuz发布原创AI帖子内容生成:起尔 | AI原创帖子内容生成插件开发定制
  • el-table在某些条件下禁止选中
  • 深入探讨 HTTP 请求方法:GET、POST、PUT、DELETE 的实用指南
  • 深度学习:元学习(Meta-Learning)详解
  • uniapp展示本地pdf + 自定义标题
  • 国标GB28181设备管理软件EasyGBS国标GB28181-2016平台更换SQLite数据库的步骤
  • C++基础与实用技巧第三节:内存管理与性能优化
  • 【移动应用开发】界面设计(二)实现水果列表页面
  • 基于Multisim的四人智力竞赛抢答器设计与仿真
  • 前端学习---(4)js基础-2
  • 重生之“我打数据结构,真的假的?”--3.栈和队列(无习题)
  • 《Python游戏编程入门》注-第2章2
  • PoissonRecon学习笔记
  • 腾讯云DBA面试(一面)
  • Python:背景知识及环境安装