朗尊VUE项目打包部署指南(客户)

发表时间: 2019-11-14 14:07:42 阅读: 189

朗尊B2B2C多用户平台,利用VUE开发适合多屏移动设备的Web,APP,小程序等。 该文档的作用就是让你可以轻松对Web,APP等项目进行打包,用于发布和管理。

一、概述:

朗尊B2B2C多用户平台,利用VUE开发适合多屏移动设备的Web,APP,小程序等。

该文档的作用就是让你可以轻松对Web,APP等项目进行打包,用于发布和管理。

二、环境版本:

所需环境如下:

node.js : v10.15.0 (电脑上必须先安装node.js,在终端处用node -v命令查看node.js版本)

jdk : 1.8.0_171 (脑上必须先安装jdk,在终端处用java -version命令查看jdk版本)

三、相关软件:

编程软件:VScode或WebStorm或HBuilderX或Sublime

打包软件:HBuilder

其它工具:WinSCP

四、依赖包安装:

1、打开编程软件:VScode或WebStorm或HBuilder,并进入我们开发的项目,调出终端(终端调出方法每个编程软件都不同),如下图:



2、在终端处输入命令:npm install,如下图:



安装完成后,该文件夹会新增一个node_module的文件夹,安装这件依赖完成,如下图:



五、配置服务器地址:

在【src】-->【config】文件夹下的config.js文件里配置好服务器地址,如下图:



dev:开发环境下服务器的配置;

test:测试环境(预生产环境)下服务器的配置;

prod:生产环境下服务器的配置;

六、在开发环境下调试:

在终端处输入命令:npm run dev,如下图所示:



成功,如下图所示:



在浏览器里输入地址:localhost:8080(该地址可在config/index文件下配置),就能在本地浏览器里调试程序,如下图所示:


备注:npm run dev里的dev是在package.json文件里配置的,如果是微服务版本,本地调试的命令改为:npm run dev--micro,如下图所示:



七、生成发布版本的代码:

1、在终端处输入命令:npm run build--prod(具体命令,请看下面第3点),如下图:



2、执行命令成功后,会在该项目的文件夹里,生成一个名为dist的文件夹,发布版本的代码(【static】和【index.html】)都在dist文件夹里,如下图:




3、注意:命令npm run build--prod里的build--prod,是在项目文件里的package.json里设置的:

build--test:生成测试环境(预生产环境)的代码

build--prod:生成生产环境的代码

build--micro-test:生成测试环境(预生产环境)的代码(微服务版本)

build--micro-prod:成生产环境的代码(微服务版本)

八、打包APP:

1、用Hbuilder打开刚才用npm run build--prod命令生成的dist文件,如下图所示:



2、在HBuilder软件的项目管理器中对着【dist】文件名点击鼠标右键,点击“转换成APP”,如下图:



3、转换APP成功后,此时文件夹里会增加一个名为manifest.json的文件证明已经转换成功,原来的“转换成APP”会消失,变成“发行”,如下图:



4、配置manifest.json文件:

4.1、配置【应用信息】,如下图所示:

Appid:可以点击云端获取(如果只打包apk文件,不上架时,可以用Hbuilder的云端appid,如果要上架,要用该平台的appid才能上架成功,应该平台的appid要注册登录该应用平台获取)



4.2、【图标配置】,如下图所示:



4.3、【启动图片(splash)配置】,如下图所示:




4.4、【SDK配置】及【模块权限配置】,配置需要用到的SDK,以下以配置plus.payment-支付SKD为例,如下图:



4.5、【代码视图】

在【代码视图】里搜索‘code’,修改版本号,如下图所示:



5、打包原生APP:


5.1、点击【发行】-->【云打包-打原生安装包】,如下图所示:


5.2、配置安卓包(要申请Google开发者证书的话请自行百度,此处不作描述)。

Android包名:在申请开发者证书时设置

证书别名:在申请开发者证书时设置

私钥密码:在申请开发者证书时设置

证书文件:在申请开发者证书时生成下载的证书



5.3、打包IOS端(要申请IOS开发者证书的话请自行百度,此处不作描述):

AppID:在申请开发者证书时设置

私钥密码:在申请开发者证书时设置

profile文件:在申请开发者证书时生成下载的文件(windows系统下须要用到appuploader这个软件申请,IOS系统下请上苹果官网参阅相关文档)

私钥证书:在申请开发者证书时生成下载的证书(windows系统下须要用到appuploader这个软件申请,IOS系统下请上苹果官网参阅相关文档)



5.4、点击【打包】生成apk和ipa文件后手动下载APP包,如下图所示:






九、部署web端:

1、打开WinSCP软件,输入主机名、用户名及密码(账号密码请问后台开发人员要)后进入会话窗口,如下图所示:



2、进入部署路径(部署路径请问后台开发人员要),如下图:




3、进入该项目文件夹下的【dist】文件夹里,复制【static】及【index.html】文件,粘贴到WinSCP的部署路径里。如下图所示:


4、部署成功后,在浏览器里输入网络地址(地址请问后台开发人员要),就可以进入web端了。如下图所示:





文章来源:朗尊原创

网站声明:以上内容为朗尊软件官方网站的原创文章,如需转载,请注明出处,谢谢合作!

电商头条新闻
1 S2B2C模式是什么?
广州朗尊软件科技有限公司成立于2014年,公司立足自我创业,专门从事web开发及系统集成业务服务,系统咨询服务和集成
2 Legendshop线上与线下系统的微服务平台的解决方案
Legendshop微服务平台解决方案
3 社交美妆时代,新品牌如何打造爆款
随着各种直播、社交媒体平台的兴起,每年都会有不同的美妆爆款产品出现。那么这些爆款都是通过哪些方式让美妆达人都为之倾倒呢?在社交媒体成长的千禧一代时代到来,在消费者赋能,注意力稀缺,产业链重塑的背景下,他们改写原有的商业竞争机制。
4 小羊云商新零售解决方案
广州朗尊软件科技有限公司成立于2014年,公司立足自我创业,专门从事web开发及系统集成业务服务,系统咨询服务和集成
5 b2b2c商城系统能为企业带来什么?
b2b2c是一种电子商务模式,企业选择做自己的b2b2c商城系统最终当然是为了盈利。下面b2b2c商城系统小编带你一起来看看。
6 分析互联网产品的情感化设计
相信关注情感化设计话题的人大部分都看过诺曼的《情感化设计》一书,但诺曼谈得太宏观、太概念化了。我想谈谈对互联网产品情感化设计的理解及操作方法
7 朗尊软件晋级中国创新创业大赛第四届羊城“科创杯”创新创业大赛复赛
中国创新创业大赛是由科技部、财政部、教育部、中央网信办、全国工商联共同指导举办的一项以“科技创新,成就大业”为主题的全国性比赛。为加快实施创新驱动发展战略,整合创新创业资源,搭建创新创业服务平台,引导社会各界力量支持创新创业,打造推动经济发展和转型升级的强劲引擎,广州市科学技术局特举办第八届中国创新创业大赛(广东·广州赛区)暨第四届羊城“科创杯”创新创业大赛。
8 开通商城的步骤
如何注册新用户,开通商城
  • 客服热线:020-84131336
  • 在线时间:周一至周六 9:00-19:00
  • 在线客服
微信服务号

Copyright©2004-2012 All Rights Reserved 粤ICP备15089754号-1 网站地图 站点地图

b2b2c商城系统 java开源商城 云商城系统 电商平台系统 电商分销系统 商城分销系统 多用户商城系统 微信小程序商城