一、构建vue项目
1,使用vue-cli4.4.0构建
2,引入vant组件
a,安装vant组件:npm i vant -S
b,在项目的public目录下的index.html中引入样式文件<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@next/lib/index.css" />
c,在main.js中引入:import Vant from 'vant' 和 Vue.use(Vant)
d,直接使用vant组件开发app
e,安装基于命令行的http服务器 npm install http-server -g
二、打包vue项目
1、修改router文件夹下中index.js里面的mode的配置,将mode:history改为mode:hash;
2、执行npm run build命令打包
3、打开项目文件夹通过cd dist进入到dist目录,在黑窗口输入http-server启动vue打包好的项目,在浏览器中输入三个中任意一个地址就可看到该项目页面
三、使用HBuilder创建项目并打包为app
1、创建一个类型为5+app的项目
2、删除新项目中除unpackage和manifest.json的文件,将dist中的文件资源复制到HBuilder建的项目中(可能要修改index.html文件资源的路径)
3、修改manifest.json中内容
a,基础配置:
生成appID
配置应用入口页面(默认为index.html)
b,App常用其他设置
将支持cpu类型三个全都勾选上
4、点击发行
选择原生app-云打包,证书选择公共测试证书,等待打包成功控制台出现链接即可下载apk安装包
四、问题
1、当下载好apk安装包并安装到手机后,打开app发现空白,以为是路径错误,但是怎么改都不行,
2、最后发现应用入口页面还可以为网络地址
3、所以可以省略第三步中的第二步,并将入口地址修改为我们使用http-server启动vue项目的网络地址
4、结果
五、将vue写好的项目打包部署至nginx,在浏览器测试部署项目是否正常,若正常则将路由地址填写到HBuilder的首页地址即可,亲测可用。在这里安卓只是一个容器,项目本身还是vue项目。