vue项目打包成app

一.利用HBuilder的云端打包功能 

1.修改原vue项目的vue.config.js 中的publicPath，代码以下：

module.exports = {
  publicPath:"./"
};

2.执行命令npm run build 打包生成dist
3.打开HBuilder，文件->打开目录，选择上述dist目录，项目名称且自定义，导入项目
4.将上述项目转成app项目
5.发行-->打包

2、利用cordova

环境准备：jdk 、android sdk、gradle
1.jdk是个java开发都会安装了，不废话，建议配置环境变量为jdk1.8的,由于目前下载的android sdk/gradle最新版的都对jdk版本有要求

2.android sdk（校验命令：adb）

• 2.1 下载 安装

• 2.2 配置环境变量，
  新增系统变量ANDROID_HOME为安装路径
  
  编辑path添加：%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools（win10下是分开的以下：）
  

• 2.3 启动SDK Manager，下载依赖
  

• 参考操做以下截图：
  

3.下载gradle 配置环境变量，都是老一套，先下载，解压后，配置GRADLE_HOME和path。（校验命令：gradle -v）

---

不做赘述，自行百度

---

上述环境准备完成后，开始下面的cordova教程：

1.自行安装nodejs的环境
2.安装依赖 npm install -g cordova （校验命令：cordova -v）
3.建立项目 cordova create jeecg-app org.jeecg demoty

• jeecg-app：cordova目录名
• org.jeecg： 包名
• demoty： 项目名（在config.xml中查看）

4.添加安卓库 cordova platform add android
5.测试环境 cordova requirements 正常以下：

---

本人出现过一次错误以下图

问题缘由：本人安装的是android sdk platform是29，可是项目依赖的是28
修改方法：找到下述三个文件，如有版本号限制，修改便可
..cordova项目目录/platforms/android/project.properties
..cordova项目目录/platforms/android/CordovaLib/project.properties
..cordova项目目录/platforms/android/CordovaLib/AndroidManifest.xml

---

---

备注：生成的cordova文件中

• config.xml -包含应用相关信息，使用到的插件以及面向的平台
• platforms – 包含应用运行平台如 Android 和 iOS 上对应的 Cordova 库
• plugins – 包含应用所需插件的 Cordova 库，使得应用可以访问例如照相机和电池状态相关的事项。
• www – 包含应用源代码，例如 HTML, JavaScript 和 CSS 文件（后面会把vue项目dist下的内容拷贝至此目录）
• hooks – 包含为个性化应用编译系统所需的脚本
• android - Android平台的cordova库,执行4操做后才会生成

---

5.编译本身的vue项目，npm build 生成dist文件夹，拷贝dist下的内容至上述cordova项目的www文件夹下

6.生成签名文件： keytool -genkey -v -keystore D:\sign\test.keystore -alias mytest -keyalg RSA -validity 7

---

-keystore D:\sign\test.keystore 表示最终生成的证书路径，若是直接写文件名则默认生成在用户当前目录下
-alias mytest 表示证书的别名是mytest(后面用到这个) 不写这一项的话证书名字默认是mykey
-keyalg RSA 表示RSA算法
-validity 7 表示证书有效期7天

密钥口令和密钥库口令在此处手动输入，需记住，后面有用

---

7.生成apk cordova build android --release (未签名，成功以下)

8.签名,将上述D:\sign\test.keystore文件放到未签名的apk所在的目录下，输入如下命令：
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore test.keystore app-release-unsigned.apk mytest
完成后改个名字，发送到手机安装便可使用

---

上述78步骤能够有另外两种方式替代：
1.在cordova项目根目录下，新建一个 build.json 文件,而后敲命令： cordova build --release

{
  "android": {
    "release": {
      "keystore": "test.keystore",
      "alias": "mytest",
      "storePassword": "",
      "password": ""
    }
  }
}

2.直接敲命令：
cordova build android --release --keystore="test.keystore" --alias=mytest --storePassword=*** --password=***

• keystore 数字签名证书，
• alias 别名
• storePassword 密钥库口令
• password 密钥口令