Vue项目使用HBuilder转安卓项目

一、构建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项目。