Vue-cli3+HBuilderX打包APP

前言
        Vue为什么要打包，这就要说说vue的打包后是个什么样子，vue打包后至少会形成css、font、js文件夹和一个index.html文件，所以打包后，会将所有.vue文件结合成一个html文件。接下来还要对项目进行打包，这个打包主要是让其成为一个app应用（.apk）的一个过程，可以安装到手机上的一个应用程序。

大概流程及步骤

        一、打包完整流程及步骤：

                1、将vue项目利用yarn build打包----之后会生成一个dist文件夹。
                2、再HBuilderX创建一个H5+App项目，暂且叫它A项目。
                3、把刚刚创建好的A做一个整理。将dist文件夹里的内容复制到A的根目录下
                4、设置manifest.json文件
                5、利用HBuilderX发行—原生APP打包（云打包）即可
                6、打包完成后等待其返回下载网址

        二、需要注意的问题：

                1、路径问题
                不要一上来就直接将vue项目yarn build，因为直接打开dist中的index.html是从系统盘如D盘开始寻找static文件夹，于是就         找不到static文件夹因此需要从配置中修改访问路径；
                去config文件夹下的index.js找build命令的配置有一个属性叫assetsPublicPath，它的值为‘/’。意思是根目录，这时会从         index.html所在的硬盘的根目录下开始查找，自然无法找到。
                解决方法：将assetsPublicPath : ‘/’ 改为 assetsPublicPath：‘./’
        
        如果没有config，和build文件夹，需要在项目根目录下创建vue.config.js文件

module.exports={
	publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
}

        2、整理A文件夹
                在移动项目的时候注意，直接将dist文件夹下所有文件移动到A项目里。
        3、利用HBuilderX打包时注意证书如何生成证书。参考：生成Android签名证书。
        具体方法如下：
                1、 找到jdk，进入bin目录
                2、 输入以下内容：

keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystore

                （其中testalias为证书别名，text.keystore为证书的文件名）
                3、 回车后按照姓名、组织单位名称、组织名称、城市或区域名称、省市州名称、国家代号（CN代表中国）、确认逐一填写。
                4、 随后会让你输入证书密码。注：确认证书密码必须要与证书文件密码一样。
                5、 完成后证书将在当前bin目录下显示。
                        查看证书信息：keytool -list -v -keystore test.keystore
        这时候可以在bin目录下看到生成的证书文件。

创建A项目

        开始创建H5+APP项目，现在做一个简单的创建。
        点击顶栏菜单 文件 — 新建 — 项目

HBuilderX打包过程

        主要说一下证书如何使用。打开HBuilderX，点击准备好的H5+APP项目，点击菜单发行，原生APP-云打包。


        关于证书选择，我们选【使用自有证书】，根据生成证书的别名，密码依次填写，证书文件选择.keystore即刚刚在jdk中bin目录下生成的证书，然后再点击打包即可，需要特别注意的就是上图标序号的地方。然后就是耐心等待，在控制台上每隔一分钟会显示一次打包状态，如果打包完毕，会返回一个链接，这个链接是下载app的一个链接，发送到手机上点击下载即可，不过会有5次下载的一个限制。顺带提一句，每天这样打包次数也有限制，到底是多少，我没有数过。