一、概述:

朗尊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端了。如下图所示: