大家好,今天来为大家分享源码分享提取后怎么弄到自己网站的一些知识点,和获取源码的网站的问题解析,大家要是都明白,那么可以忽略,如果不太清楚的话可以看看本篇文章,相信很大概率可以解决您的问题,接下来我们就一起来看看吧!
一、基础打包过程
1、整理思路
相信有很多公司,用习惯老式的ERP系统,将软件UI固化为WINDOWS桌面端的应用程序。你将一个Element项目摆在他的面前,他看不惯!他想让你的Web项目封装为一个客户端!是的,你没听错!我们的目的,就是将Web项目封装成一个客户端!
2、如何实现呢?
我难道重新开发一个OA客户端吗?我难道废寝忘食一个月,专研学习C++吗?我的思路肯定是写一个容器,内嵌H5网页!聪明的你明白了吗?据说钉钉就是这么做的!
首先,你需要有一个正式上线的项目,能在外网或内网被访问,我这以我的CSDN主页为例!其次,写一个空白的H5界面,加一个跳转到你项目网址的JS。最后,将这个H5文件,通过nodewebkit封装为一个客户端!Vue项目,打包后其实也是H5文件,可以一概而论!
3、下载nodewebkit
进入https://nwjs.io/,下载后得到nwjs-v0.54.0-win-x64.zip文件,解压到指定的文件夹
当然它是开源的,你可以到Github中下载它的源码:https://github.com/nwjs/nw.js
3.1:下载
3.2解压
4、新建一个package.json文件
5、新建一个index.html文件
6、打包zip压缩文件后,将后缀名改为nw
改完后缀名后如下图所示:
7、打包文件
将2.nw复制到第一步的文件夹内,使用cmd打开第一步的目录
执行命令:
该行命令的意思,就是将两个EXE文件合并为一个EXE文件
命令执行后,当前目录下生成app.exe文件
8、发布客户端
如果直接将app.exe复制到其他目录,是无法运行的。因为app.exe有很多需要的依赖文件,比如目录下的各类dll文件。要将此客户端正式使用,需要将整个目录一起打包带走,作为客户端的安装目录。
原文CSDN链接:https://zwz99.blog.csdn.net/article/details/118110654
二、Vue项目的打包
2.0思路解析
聪明的读者已经发现,我都已经把CSDN主页都封装为客户端了,Vue项目还不是了如指掌?将Vue项目封装为客户端的问题,可以拆解为以下两步:1.将Vue项目部署到Nginx上,放在服务器,生成一个网址2.将网址套用在之前H5文件的跳转路径中,完成!第二步,在之前已经详细说明,所以,我们来尝试如何将Vue发布到服务器上!
2.1Nginx是什么
Nginx是一款轻量级的Web服务器、反向代理服务器,由于它的内存占用少,启动极快,高并发能力强,在互联网项目中广泛应用。就像Tomcat完美支持运行Java项目一样,Nginx可以完美支持Vue项目,他们就是一对CP!
其中,conf文件夹下有一个关键的配置文件——nginx.conf。这个文件里可以配置Vue项目的运行端口、SSL证书、反向代理、负载均衡等等。具体代码会在最后给出!
html文件夹下,就是放Vue打包后的dist内的文件,完美兼容!log文件夹下方一些运行的日志,如果发现跑不起来,可以看看错在哪PS:所谓正向代理,就是代理服务器代替你访问服务器,如国外网址,运用代理服务器,可以大大加快访问速度,可以理解为像VPN这样的东西,你知道你访问的是什么,但国外网站只知道代理服务器在访问他,不知道真正访问的人。
所谓反向代理,就是代理服务器代替服务器访问你,你不需要只要请求代理服务器,他会根据你的请求,帮你转发到相应的服务器。目标服务器知道是你在访问,但你不知道你到底访问了哪台服务器!
2.2Vue项目部署
将Vue打包文件放到html文件夹下后,就可以启动Nginx了!cmd进入Nginx的目录,运行命令即可!
2.3上线验证
如果部署的是云服务器,需要注意是否开启端口外网访问,如阿里云默认除8080端口外禁止外网访问,腾讯云则无此限制。如被限制,需要登入相应的控制台设置。打开浏览器,确保项目可以被访问,最后将该网址套用在之前的H5文件内,即可完成客户端封装!
三、附录
package.json完整代码
{\n\t/**指定程序的起始页面。*/\n\t&34;:&34;,\n\t/**字符串必须是小写字母或者数字,可以包含.或者_或者-不允许带空格。name必须全局唯一。*/\n\t&34;:&34;,\n\t/**程序描述*/\n\t&34;:&34;,\n\t/**程序版本号*/\n\t&34;:&34;,\n\t/**关键字*/\n\t&34;:[&34;,&34;],\n\t/**bool值,如果设置为false,将禁用webkit的node支持。*/\n\t&34;:true,\n\t/**\n\t*指定一个node.js文件,当程序启动时,该文件会被运行,启动时间要早于node-webkit加载html的时间。\n\t*它在node上下文中运行,可以用它来实现类似后台线程的功能。\n\t*(不需要可注释不用)\n\t*/\n\t//&34;:&34;,\n\t/**\n\t*bool值。默认情况下,如果将node-webkit程序打包发布,那么只能启动一个该应用的实例。\n\t*如果你希望允许同时启动多个实例,将该值设置为false。\n\t*/\n\t&34;:true,\n\t/**窗口属性设置*/\n\t&34;:{\n\t\t/**字符串,设置默认title。*/\n\t\t&34;:&34;,\n\t\t/**窗口的icon。*/\n\t\t&34;:&34;,\n\t\t/**bool值。是否显示导航栏。*/\n\t\t&34;:false,\n\t\t/**bool值。是否允许调整窗口大小。*/\n\t\t&34;:true,\n\t\t/**是否全屏*/\n\t\t&34;:false,\n\t\t/**是否在win任务栏显示图标*/\n\t\t&34;:false,\n\t\t/**bool值。如果设置为false,程序将无边框显示。*/\n\t\t&34;:true,\n\t\t/**字符串。窗口打开时的位置,可以设置为“null”、“center”或者“mouse”。*/\n\t\t&34;:&34;,\n\t\t/**主窗口的的宽度。*/\n\t\t&34;:1920,\n\t\t/**主窗口的的高度。*/\n\t\t&34;:1080,\n\t\t/**窗口的最小宽度。*/\n\t\t&34;:400,\n\t\t/**窗口的最小高度。*/\n\t\t&34;:335,\n\t\t/**窗口显示的最大宽度,可不设。\n\t\t&34;:800,*/\n\t\t/**窗口显示的最大高度,可不设。\n\t\t&34;:670,*/\n\t\t/**bool值,如果设置为false,启动时窗口不可见。*/\n\t\t&34;:true,\n\t\t/**是否在任务栏显示图标。*/\n\t\t&34;:true,\n\t\t/**\n\t\t*bool值。是否使用kiosk模式。如果使用kiosk模式,\n\t\t*应用程序将全屏显示,并且阻止用户离开应用。\n\t\t**/\n\t\t&34;:false\n\t},\n\t/**webkit设置*/\n\t&34;:{\n\t\t/**bool值,是否加载插件,如flash,默认值为false。*/\n\t\t&34;:true,\n\t\t/**bool值,是否加载Javaapplets,默认为false。*/\n\t\t&34;:false,\n\t\t/**bool值,是否启用页面缓存,默认为false。*/\n\t\t&34;:false\n\t}\n}\nNginxconf配置文件模板代码\n\n\n每一个worker进程能并发处理(发起)的最大连接数\nworker_connections65535;\n}\n\n\nhttp{\n长连接超时时间,单位是秒\nkeepalive_timeout65;\n允许客户端请求的最大单文件字节数。\nclient_max_body_size100m;\n导入外部配置文件文件扩展名与文件类型映射表\nincludemime.types;\n压缩最小文件阀值\ngzip_min_length1k;\nhttp协议版本\ngzip_http_version1.0;\n39;MSIE[1-6].&压缩级别\ngzip_comp_level6;\n告知客户端能否缓存\ngzip_varyon;\n负载均衡\nupstreamzwz{\nserver127.0.0.1:13145weight=1;\n}\n\nserver{\nlisten8080ssl;\nserver_namelocalhost;\n设置解决大json返回不完整问题\nproxy_buffers161024k;\nproxy_buffer_size1024k;\n在多级代理的情况下,记录每次代理之前的客户端真实ip\nproxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for;\n\nsslon;\n\nssl_certificatessl/4798969_xxxxxx.com.pem;\nssl_certificate_keyssl/4798969_xxxxxx.com.key;\nssl_session_timeout5m;\nssl_ciphersECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;\nssl_protocolsTLSv1TLSv1.1TLSv1.2;\nssl_prefer_server_cipherson;\ncharsetutf-8;\n\n\nlocation/{\nroothtml;\nindexindex.htmlindex.htm;\nadd_header&39;&39;;\n}\nlocation/xboot{\n#反向代理\nproxy_passhttp://zwz;\n}\n\nerror_page404/404.html;\n}\n}\n\n123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
项目完整源码获取方式:关注小编+转发文章+私信【666】免费获取!!!
HTML
《HeadFirstHTML与CSS》
HeadFisrt系列书你懂的,为入门而生,文笔风趣幽默为主,配图也很丰富,简单易懂就对了。
《HTML5权威指南》
豆瓣评分8.5的书,书是没问题,800多页的书全面性不用说,但是能不能读得完这是一个问题,就看决心和“手速”了。
CSS
《CSS权威指南》
放在现在来看是本“老书”了,但是很多基础的东西在那摆着也得学。CSS东西就是细节多,这本就当是给CSS的知识点做了一个大梳理吧,所以这本书当工具书看是可以。
《CSS揭秘》
这本书展示了47个CSS的技巧,是一本注重实践的教程,虽然算进阶书,但是内容没那么难,看完对很多实现思路有启发。
JavaScript语言
《你不知道的JavaScript》
这本书是翻译过来的,分好几卷,黄油油的封面你懂的~应该说这本书把JavaScript里很多复杂且深度的概念进行了细致讲解,比如作用域、闭包、原型、异步等等,网上书评啥的还是可以的。
《JavaScriptDOM编程艺术》
这本书并不厚,小白可用,初学时搞定并实践了这本书里的内容,应该入门没啥问题,这样后面就可以找一些经典甚至圣经类的书来加强和巩固了。
《JavaScript高级程序设计》
大名鼎鼎的JS红宝书,是权威的JavaScript入门书籍,没错是入门书籍!不要被名字里的“高级”两个字吓跑~内容循序渐进,基础且全面,不能指望一遍就过,适合精读也适合回味。
《JavaScript权威指南》
上面是“红宝书”,这本是“犀牛书”,据说这两本在一起更搭配哦。
这本书是淘宝前端团队翻译的,也算是JavaScript开发者的圣经之一,内容太多太全,如果能多通读几遍并有所心得,估计成神之路也就不远了~
ES
ES和JS的关系应该能分得清吧,对前端开发来说,ES6+还是有必要学一下的,经典的材料有几个。
《阮一峰ECMAScript6入门教程》《深入理解ES6》
豆瓣评分9.4的书,比较系统地介绍了ES的重要特性。
TypeScript
作为一名合格的前端工程师,TypeScript现在也是必须掌握的知识了,学习它最好的材料还是文档。
《英文文档》《中文文档》《深入理解TypeScript》
看文档还是最好的,至于书的话,这本《深入理解TypeScript》是原版《TypeScriptDeepDive》的翻译本,有精力可以康康。
数据结构和算法
《学习JavaScript数据结构与算法(第3版)》
数据结构和算法本身其实和编程语言无关,但是如果非得让找一本基于JavaScript语言描述的数据结构和算法书,那这本是前端的菜就对了。除了常用数据结构、算法、以及算法思想均有涉及之外,书中专门还用一章来写了ES和TS的东西。
设计模式
《JavaScript设计模式》
设计模式这东西本来也是和语言无关的,这是一本基于JavaScript语言描述的设计模式落地实现,所有常见的设计模式都讲到了,行文风格也不枯燥,给出的场景和实例也挺全,当然这本重在灵活运用,进阶可阅。
网络协议
对于前端开发来说,网络协议肯定是必看,尤其应用层协议,其他底层协议能多了解一点当然更好。
《图解TCP/IP》《图解HTTP》
这两本网络协议图解书籍通俗易懂,配图也很形象,黑皮(灰皮)版网络协议圣经啃不下来的,可以看看这个。
《HTTP权威指南》
这本书并不只有HTTP协议本身的内容,也并不仅仅针对前端开发者。它里面将很多周边技术和Web化过程中诸多的技术和原理都进行了阐述,内容系统庞大。跟Web开发有关的程序员在进阶扩大知识面时都可以看看。
Node.js
《Node.js中文文档》
http://nodejs.cn/api/
Node.js版本更新这么快,看文档是最靠谱的。
《Node.js实战》
如果硬要找一本教材看,这本Node.js的实战教程可以一用。
《深入浅出Node.js》
这本书不是写给初学者看的,算是Node.js进阶书籍,国人作者真的是长脸,对Node.js的一些关键原理做了剖析,如果想深入了解Node,这本书值得一看。
应用框架
框架这东西更新迭代实在太快了,要么还没来得及出书,要么就是那种迅速推出的快餐书,基本都是照搬框架的官方文档,有时候翻译和理解得还不一定准确,所以在学习前端的形形色色的框架时,官方文档还是最靠谱和全面的资料,包括但不限于:
关注性能
《Web性能权威指南》
看这本书之前像TCP/IP协议族的基础最好具备,虽然书中很多篇幅也在讲述这部分内容,但是加入了对应优化实践的知识和内容,进阶阅读可用。而且这本书也不仅仅是前端开发人员可以看,所有Web应用及站点开发人员都可以阅读,包括后端、运维、存储、视频、性能工程师等等。
后记
最后小伙伴们如果有什么要补充,或者可以推荐的不错资料,欢迎多多补充,一起分享提高。
好了,文章到这里就结束啦,如果本次分享的源码分享提取后怎么弄到自己网站和获取源码的网站问题对您有所帮助,还望关注下本站哦!
