将vue打包为APP重要步骤和流程

一、大致流程
1.项目整体使用Vue+HbuilderX(或者Hbuilder)开发
2.使用Vue来实现基本页面跳转，增删改查等app基本功能，
3.当需要使用到app原生功能则使用 mui.js
4.真机调试
5. 最后通过HbuilderX将vue项目打包成app包

//题外话
如果你会vue,且你的web站是适合手机屏幕的
那么你完全可以考虑一下uni-app
因为使用uni-app编写的一套代码可以运行到多个平台
vue h5转换uni-app指南
二、注意事项

1.router里的mode注解掉

const router = new VueRouter({
//mode: 'history',   //设置history是为了去掉默认的#锚点，但我们需要#锚点，否则跳转路径时会出现问题
base: process.env.BASE_URL,
routes
})

2.将publicPath修改为"./" （ 这里是指vue cli3,4版本）

在vue项目下创建vue.config.js文件
（老版本则修改目录下config文件内index.js中assetsPublicPath修改为 assetsPublicPath: ‘./’）

module.exports = {
//下面的process.env.NODE_ENV 可以判断当前环境是开发环境还是生产环境
publicPath: process.env.NODE_ENV === 'production'
? './'    //这里要填 './'或者''(空),默认为'/',这里设置的会被应用到index.html里css,js路径的前面
: '/',   //这里是开发环境,通常没有项目名
outputDir:'dist',   //当运行 build 时生成的生产环境构建文件的目录
assetsDir:'',  //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
}

三、将应用打包

1.按照上面的步骤修改以后,
就可以使用npm将vue打包为静态文件了

npm run build

2.用HbuilderX生成mainfest.json包
(如果使用的是Hbuilder,导入项目,右键直接转移动APP就可以了)
打开HbuilderX新建项目 选5+App类型,新建完成之后，删除项目中除mainfest.json以外的所有文件，将vue项目打包后的文件打包过来

3.安卓证书
Android平台签名证书(.keystore)生成指南
安卓证书在线制作工具

关于Android证书的用途
证书是一个开发者的身份标志，对Android系统而言。使用一个证书签发的App，是属于同一个开发者的App。
举个极端的例子，如果你的应用证书泄露，那么别人可以用这个证书签名一个仿冒App，假如包名和你的包名也一样，就可以覆盖安装安卓手机上你之前的包。
当前仅依赖证书校验是不完善的，所以主流的Android应用市场，通过实名认证开发者信息和著作权，强化了App的唯一性。也就是从主流应用市场点更新，不会发生冒充事件。但是通过其他方式安装apk，仍然会发生冒充的可能性。
如果签名不同，即使包名相同，也无法覆盖安装。此时安卓手机会在安装时报错，需要先卸载老的版本，才能安装新版。

四、mui.js (GitHub)
要使用到app原生功能则使用mui.js
1.导入

1、安装cnpm i mint-ui -S
2、安装后导入文件：
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
////=====================\\\\\\\\
3.或直接在index.html里引入
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>

2.简单使用
Vue单页面应用打包app处理返回按钮