一分钟将Vue移动端项目一键打包成app

淩亂°似流年 2022-12-12 13:44 304阅读 0赞

导语：  
在vue项目开发完成后，我们就可以把项目打包成一个手机app，是不是很神奇，而且是一键生成，不需要操作。

## 1，把vue项目打包成dist目录 ##

我们先将项目目录下config文件内index.js中

assetsPublicPath修改为 assetsPublicPath: ‘./’

然后打包成dist文件夹，在cmd输入以下命令

npm run build

你就可以得到下面这个文件夹  
![在这里插入图片描述][20201007102630611.png_pic_center]

## 2，下载Hbuilder ##

地址：[http://www.dcloud.io/][http_www.dcloud.io]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center]  
然后在Hbuilder中打开dist目录，我们可以得到下图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 1]

## 3，打包成app ##

接着我们右击这个dist目录，选择转化为移动app

这时候就会出现一个manifest.json，点击

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 3]  
这里你可以选择启动图配置，选择你喜欢的启动图，也可以跳过。

大部分的设置都可以默认，跳过

最后  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 4]

对了，因为vue项目没办法检测这个手机物理返回键，所以我们可以在index.html文件中修改一下，很简单

<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><title>123</title><link href=./static/css/app.8203cae5dd59c366dbd3e59555e22b0b.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript>document.addEventListener('plusready', function(a) {  //等待plus ready后再调用5+ API：
                      在这里调用5+ API
                      var first = null;
                      plus.key.addEventListener('backbutton', function() {  //监听返回键
                              //首次按键，提示‘再按一次退出应用’
                              if (!first) { 
                                  first = new Date().getTime(); //获取第一次点击的时间戳
                                  // console.log('再按一次退出应用');//用自定义toast提示最好
                                  // toast('双击返回键退出应用'); //调用自己写的吐丝提示 函数
                                  plus.nativeUI.toast("双击退出", { duration:'short'}); //通过H5+ API 调用Android 上的toast 提示框
                                  setTimeout(function() { 
                                      first = null;
                                  }, 1000);
                              } else { 
                                  if (new Date().getTime() - first < 1000) {  //获取第二次点击的时间戳, 两次之差 小于 1000ms 说明1s点击了两次,
                                      plus.runtime.quit(); //退出应用
                                  }
                              }
                          }, false);
                  });</script><script type=text/javascript src=./static/js/manifest.3ad1d5771e9b13dbdad2.js></script><script type=text/javascript src=./static/js/vendor.48ebd8a571039a26aa74.js></script><script type=text/javascript src=./static/js/app.202646c89ad3a0f4e2e1.js></script></body></html>

直接复制贴上去就行了。

点击导航栏的发行，选择云打包

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 5]  
广告可以去掉，点击打包。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 6]  
打包完成，下载到手机，就可以安装使用了。

**补充**：  
![在这里插入图片描述][20200902155530706.jpg_pic_center]  
微信搜索【web小馆】，回复**全栈博客项目**，即可获取**项目源码和后续的实战文章教程**。每天用最简单朴实的语言，潜移默化的提升你的计算机基础知识和前端技术。小米粥，一个专注的web全栈工程师，我们下期再见！

![在这里插入图片描述][20200825125805528.png_pic_center]  
![node后台][node]

[20201007102630611.png_pic_center]: /images/20221123/38ef5b8dbbc94a45bac9b53fe219035f.png
[http_www.dcloud.io]: http://www.dcloud.io/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/661b9000a18a4b20823b5e569c9fb1c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/d1342bed1cf34255b8e8cda222bedb82.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/3ed67532e9834e5bb25a4f8b67ffa227.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/3dc25ed796d34510857676882f39f19d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/d411e4142c814480a4fec79af2e8b21d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/8b2e3f165b424f6089997b723e297245.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/a819bba681d840ba8bcdf7013225b2eb.png
[20200902155530706.jpg_pic_center]: /images/20221123/057b7639e82f437792495d48924f8543.png
[20200825125805528.png_pic_center]: /images/20221123/e8146a81852445adb1fdd8dffe1373f5.png
[node]: /images/20221123/47637bf21e474ac784a03abfd55e2ea1.png