基于 Vue-cli 项目打包为移动端app
前言
我写操作喜欢写全，主要是自己懂得不多，相关方面的知识不能融会贯通，知识壁垒很多，网上七拼八凑看的教程，现在整理成一份完整的攻略以备后用。
打包的代码比较简单，没有复杂功能，是我写的方格游戏移动版。主要目的是想体验一下 vue 转 app 的操作过程。
感兴趣的可以看下游戏的PC版，移动版也有，但我朋友说她手机上玩不了，哈哈，我的手机能玩啊。
实践参考《基于Vue的项目打包为移动端app》
https://baijiahao.baidu.com/s?id=1655878004078867586&wfr=spider&for=pc
项目准备
使用vue-cli开始一个Vue新项目
使用vue-cli脚手架，开始一个新项目。详情在我的另一篇博客里有，这里不再赘述。
项目目录
之前做项目练习的时候，没想过打包，静态资源都是随便放。现在需要打包了，静态资源需要放在static下面，包括图片，js 等。
config下面的index.js
尤其要注意 assetsPublicPath: './'
项目打包
打包前
在项目的根目录新建一个文件 vue.confing.js
这里我还弄的不是很明白，先记录一下。
文件内容
module.exports={
ws:false, //是否代理websocket
changeOrigin:false //是否跨域
}
执行打包
上面提到的参考攻略里使用的是 yarn build ，我用的是 npm run build.
在项目的根目录里，输入 npm run build
打包完成
打包完成后，会在项目根目录自动生成打包好的文件。
如果文件有修改需要重新打包，直接把dist文件夹删除就行。然后在命令窗口重新执行 npm run build
我最开始 touch.js 放错位置了,导致打出的包里缺少该文件。
后来包里有文件，双击包里的index.html文件也能看到页面，但开始游戏的时候报自定义js中的一个方法找不到。
EventUtil is not defined
EventUtil 这个方法，我在touch.js 中有定义。
仔细看，发现是文件引入方法错了，在 indexPage.vue 文件里还在用 <script> 标签。
发现后改为 import {EventUtil } from xx
touch.js 中也使用了 export {EventUtil } 抛出
始终无法生效，再三确认和查过资料，语法没有问题。
查资料有说需要在 main.js 中引入 ，我还试了在 App.vue 中，都没有成功。
解决不了先放弃，简单粗暴，直接把自定义 js 代码放入 indexPage.vue ，完美解决问题。
发包
开发工具准备
下载 HBuilder
这个编辑器真的挺好用的，尤其是对前端开发者来说，是为vue专门设计的。我觉得很好用，还赞助了10块钱支持呢，哈哈。
新建项目
在 HBuilder 中新建项目。
将原来打包好的项目，文件转移到新建的空项目中，所有文件，选择覆盖。
jre环境准备
jre 指 Java运行环境（Java Runtime Environment，简称JRE）
这有一篇特别好的文章，我就不多说了。
Windows环境下安装JDK、JRE和环境变量配置，详细的图文教程
就补充一下测试是否安装吧
在命令行中分别输入
java
javac
java -version
出现这种情况，先检查是否有安装 jre 或 jdk
echo %PATH%
echo %JAVA_HOME%
有的话再检查环境变量是否忘记配了，检查了一下，果然没有配。具体的配置，引用的文章里写的很详细，我就是根据大神的指导完成的配置。
证书准备
操作不难，就自己生成一个证书，不要使用公共的。
Android平台签名证书(.keystore)生成指南
发行准备
在 DCloud 开发者中心使用 HBuilder 账号登录，创建一个新应用获取应用标识 AppID
打开 manifest.json 进行配置。
图标配置就选择一张图，然后选自动生成吧。
开始打包
顶部工具栏，选择发行=》原生App云打包=>然后选择打android的包。
打包成功之后，会返回apk下载文件的下载链接。