WebApp 从入门到入门（vue项目打包生成安卓应用）

1.项目工具

• HBuilder

<a>https://dcloud.io/</a>

2.项目准备

1.0 创建vue项目

vue init webpack xxx(项目名)

1.1 cd项目目录后，可运行安装其他依赖。

npm intsall vant -S （安装VantUI框架）

或

npm install mint-ui -S（安装MintUI框架）

1.2 运行项目

npm run dev

3.修改Vue项目配置文件内容

项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”，改为`“./”后，打包生成的 dist 文件。

01.png

修改后进行打包

npm run build

4. 打包操作

4.1 使用HBuilder新建独立项目，类型选择H5+App

02.png

4.2 （5+App）项目目录结构说明

03.png

创建完成后出现这几个文件和文件夹，其中css、img、js都是可删，可改的。

Unpackaged -> 用来存放App图标，配置图标后自动生成。

index.html -> 这个是App的入口文件。

manifest.json -> 这个是用来打包成App的配置文件。

4.3 打包项目文件配置

将新建项目中css、img、js、index.html文件先删除掉，然后将Vue项目打包生成的dist文件夹里面的static文件复制当前打包项目文件夹中。

04.png

4.3.1 基础内容配置

05.png 06.png

设置手机状态栏为沉浸式

07.png

4.3.2 发行生成App应用

08.png

可选择云打包。

09.png

打包成功后下载地址：

10.png

参考地址：https://www.cnblogs.com/liujun1128/p/11426077.html