APP應用的H5資源文件工程化
應用場景
APP工程中使用H5頁面，這些H5資源將與APP安裝包一起分發(fā)出去。APP應用開發(fā)與H5頁面開發(fā)，通常是由兩批人員實現(xiàn)。那么H5頁面有必要存在于獨立的工程中，而非與APP工程放一起。只需要在APP打包前，將H5工程輸出資源，復制到APP工程中就可以。
H5工程是一VUE項目，編譯生成文件存放在dist目錄下。
H5工程
目標：
1、APP應用開發(fā)人員，不一定需要熟悉H5內(nèi)容。
2、APP可直接使用H5工程輸出的內(nèi)容。開發(fā)時不需要同時打開H5工程；
3、H5工程輸出內(nèi)容，可復用。
方法說明
涉及工具
WebStorm、npm、TeamCity、Maven
TeamCity構(gòu)建步驟：
1、ready準備工作
rd /s /q .\distrd /s /q .\targetdir
2、npn install
3、構(gòu)建工程
npm run build
4、壓縮vue工程輸出資源
md .\targetcd .\distzip -r ..\target\examvue.zip *
5、將ZIP資源發(fā)布到maven中心庫
mvn deploy:deploy-file -e -DgroupId=com.hb.generalqb -DartifactId=examvue -Dversion=0.0.1-SNAPSHOT -Dpackaging=zip -Dfile=.\target\examvue.zip -DrepositoryId=snapshots -Durl=http://192.168.1.116:8081/nexus/content/repositories/snapshots
注：版本號附加SNAPSHOT，這樣版本可方便迭代。
上述為了支持mvn命令，需要對maven的setting.xml中添加如下內(nèi)容：
APP工程
主工程添加pom.xml文件，這是為了獲取zip資源包
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.hb.vue</groupId>
<artifactId>tmp</artifactId>
<version>0.0.1</version>
<dependencies>
<dependency>
<groupId>com.hb.generalqb</groupId>
<artifactId>examvue</artifactId>
<version>0.0.1-SNAPSHOT</version>
<type>zip</type>
</dependency>
</dependencies>
</project>
通用mvn命令，獲取vue的資源。示例：
mvn dependency:copy-dependencies -DoutputDirectory=.\\nexus\\ -DincludeScope=runtime
下載ZIP到本地。解壓ZIP文件到APP資源存放目錄下。
unzip -o ./nexus/examvue-0.0.1-SNAPSHOT.zip -d ./platforms/ios/HBApp/assets/
本文章適合部分團隊。有不足的地方，歡迎點評。若有其它解決方案，請留言！
