IT培训-高端面授IT培训机构
云和教育:云和数据集团高端IT职业教育品牌 全国咨询热线:0371-67988003
课程 请选择课程
    校区 请选择校区
      • 华为
        授权培训中心
      • 腾讯云
        一级认证培训中心
      • 百度营销大学
        豫陕深授权运营中心
      • Oracle甲骨文
        OAEP中心
      • Microsoft Azure
        微软云合作伙伴
      • Unity公司
        战略合作伙伴
      • 普华基础软件
        战略合作伙伴
      • 新开普(股票代码300248)
        旗下丹诚开普投资
      • 中国互联网百强企业锐之旗
        旗下锐旗资本投资

      教程 | Vue移动端项目如何打包成APP?

      • 发布时间:
        2020-12-21
      • 版权所有:
        云和教育
      • 分享:
      导语:
      在vue项目开发完成后,如果你想把项目打包成一个APP,那么本文你一定要收藏!不需要复杂的操作,只需要点点手指,就可以啦!快来看看吧!

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

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

      assetsPublicPath修改为 assetsPublicPath: ‘./’

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

      npm run build1

      你就可以得到下面这个文件夹

      2,下载Hbuilder

      然后在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>
      直接复制贴上去就行了。
      点击导航栏的发行,选择云打包

      广告可以去掉,点击打包。

      打包完成,下载到手机,就可以安装使用了。
      云和数据作为一个深耕IT职业教育多年的教育者,目前的课程涵盖云计算、大数据、人工智能、虚拟现实、软件工程、用户体验设计、网络安全、电子商务等八大方向,结合企业实际用人需求,只为培养更多高端IT技术人才。