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

最新推荐文章于 2024-04-26 16:47:03 发布

leo_KING999

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量1.3k

点赞数

分类专栏：前端文章标签： vue javascript vue.js android ios

原文链接：https://blog.csdn.net/gitchatxiaomi/article/details/108948112?utm_medium=distribute.pc_feed.none-task-blog-personrec_hot-7.nonecase&depth_1-utm_source=distribute.pc_feed.none-task-blog-personrec_hot-7.nonecase&request_id=5f7e3fb9dfc5717f9a387bde

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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

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

assetsPublicPath修改为 assetsPublicPath: ‘./’

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

npm run build

你就可以得到下面这个文件夹
在这里插入图片描述

2，下载Hbuilder

地址：http://www.dcloud.io/

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

在这里插入图片描述

3，打包成app

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

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

在这里插入图片描述

这里你可以选择启动图配置，选择你喜欢的启动图，也可以跳过。

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

最后
在这里插入图片描述

对了，因为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>

直接复制贴上去就行了。

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

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

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

leo_KING999

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
一分钟将Vue移动端项目一键打包成app

导语：在vue项目开发完成后，我们就可以把项目打包成一个手机app，是不是很神奇，而且是一键生成，不需要操作。1，把vue项目打包成dist目录我们先将项目目录下config文件内index.js中assetsPublicPath修改为 assetsPublicPath: ‘./’然后打包成dist文件夹，在cmd输入以下命令npm run build1你就可以得到下面这个文件夹2，下载Hbuilder地址：http://www.dcloud.io/然后在Hbu
复制链接

扫一扫