apicloud如何打包vue项目?


apicloud如何打包vue项目?

APICloud新建项目后,会生成以下目录结构

428166-20180830111858350-120325137.png

其中index.html是入口文件,而vue-cli打包生成的文件是在dist目录下

├─dist
│ └─static
│    ├─css
│    └─js
│ └─index.html

把dist目录中的static文件夹和index.html复制到apicloud的项目文件中即可,覆盖原来的index.html。最终apicloud的目录结构只是比原来多了一个static目录。

vue项目中需要做如下配置,config/index.js中需要把build的assetsPublicPath属性由原来的 /改成 ./

index.html添加一些代码用于处理物理返回键:

<!--引用apicloud的脚本-->
<script src="script/api.js"></script>
<div id="app"></div>
<!-- built files will be auto injected -->
<script>
  //这里处理物理返回键,避免打包后点击一次直接退出应用
  window.apiready = function () {
    var timer = 0
    api.addEventListener({
      name: 'keyback'
    }, function (ret, err) {
      var currentTime = +new Date()
      api.historyBack(function (ret, err) {
        if (!ret.status) {
          if ((currentTime - timer) > 2000) {
            timer = currentTime
            api.toast({
              msg: '再按一次返回键退出app',
              duration: 2000,
              location: 'bottom'
            })
          } else {
            api.closeWidget({
              id: 'A6089289836112', //这里改成自己的应用ID
              retData: {name: 'closeWidget'},
              silent: true
            })
          }
        }
      })
    })
  }
</script>

这样打包以后代码还存在index.html里,引用脚本的路径也是apicloud目录下的。之后把dist目录下的文件复制过去就行了。如此一来就能畅享vue带来的高效开发了。

最后,使用Eclipse APICloud Plugins(Studio 1)进行apk打包即可。

Image placeholder
前端答疑
未设置
  100人点赞

没有讨论,发表一下自己的看法吧

推荐文章
cordova如何打包vue项目?

现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app。据我现在的了解打包Vue项目目前流行的就是使用weex和cordova。weex是阿

cmd如何运行vue项目?

1、打开cmd命令窗口使用组合键【win+r】打开运行窗口,输入cmd,进入cmd命令窗口。2、将目录切换到vue项目下3、使用npmrundev命令然后在浏览器中输入网址http://localho

eclipse如何导入vue项目?

eclipse导入vue项目的方法1、首先,我们需要去导入的项目根目录下看一下,是否包含.project和.classpath文件,我这里是没有这两个文件的。这里要注意显示文件夹下的隐藏文件。2、由于

怎么打包node项目?

怎么打包node项目?可以使用JXcore打包nodejs项目:JXcore是一个支持多线程的Node.js发行版本,基本不需要对你现有的代码做任何改动就可以直接线程安全地以多线程运行。下载JXcor

如何打包react生成的项目

如何打包react生成的项目1、点击开始-菜单-运行-cmd2、使用cd命令切换到react项目根目录3、执行npmrunbuild命令进行打包打包完成后会在项目目录下生成一个build文件夹,bui

vue项目开发必须要搭脚手架么?

vue是一个渐进式的前端框架,渐进式也就意味着你可以在使用过程中,引入自己需要的一系列外部资源。这也就意味着,你可以自己搭建自己的框架,如果不用vue-cli,你可以自己搭建开发框架,需要vuex、需

vue-cli3项目打包优化

原始包大小以下主要操作都在文件vue.config.js下进行,如没有此文件,就在项目根目录下新建。1.去掉.map文件 .map文件的作用:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的

如何调试react native项目

如何调试reactnative项目调试reactnative项目有两种方式:1、模拟器调试;2、真机调试。一、模拟器调试我们在Android模拟器上按快捷键Command⌘+M,在iOS模拟器上按快捷

如何运行一个react项目?

React起源于Facebook的内部项目,因为该公司对市场上所有JavaScriptMVC框架,都不满意,就决定自己写一套,用来架设Instagram的网站。做出来以后,发现这套东西很好用,就在20

如何快速新建react项目?

创建一个react项目有三种方式:1.create-react-app快速脚手架(简单,类似于vue-cli工具)2.webpack一步一步构建3.第三方脚手架(generator-react-web

vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

vue引入swipervue使用swipervue脚手架使用swiper/引入js文件/引入css文件欢迎加入前端交流群来获取视频资料以及前端学习资料:749539640转载文章请注明出处! 如果只是

探秘K1 Power:如何打造一台坚若磐石的高性能小型机?

熟悉服务器领域的朋友,必然对浪潮K1小型机或多或少有所了解。在当年关键业务主机市场寡头垄断的格局下,浪潮400多位工程师耗费4年时间,于2010年成功研制出了K1小型机,为市场注入一股新的血液。使得中

七牛云许式伟:当 Cloud 遇上 AI

从2014年起,中国人工智能产业的创业潮就开始兴起,直至2018年,机器学习、深度学习、大数据等能力的增强,促进了计算机视觉以及应用平台等技术的不断突破。随着人工智能在我国移动互联网、智能家居、智能

Spring Cloud Stream整合Kafka

引入依赖 org.springframework.cloud spring-cloud-stream-binder-kafka 或 org.springframework.cloud spr

解密:华为CloudLink视讯引领行业的“金刚钻”

“华为新一代CloudLink视讯解决方案,完全基于鲲鹏+昇腾双引擎打造的全新平台、全系列智能协作终端等一系列新产品,未来华为视讯平台将全部更新换代。”华为IT产品线企业通信领域总裁孙权在接受IT16

Spring Cloud 上手实战-架构解析及实作

Spring简介为什么要使用微服务单体应用:目前为止绝大部分的web应用软件采用单体应用,所有的应用的用户UI、业务逻辑、数据库访问都打包在一个应用程序上。缺点:开发相互干扰,随着应用的不断升级沟通协

拐点已至,阿里云进入All in Cloud全面上云时代!

当新旧设备交替势不可挡,当云的基础设施开始超过传统的数据中心,一个新时代开始了。在这样的时代里,以数据、计算、智能为主要特征的新一代信息技术,开始成为企业数字化转型的核心动力。对于所有云服务商来说,就

基于Redis实现Spring Cloud Gateway的动态管理

引言:SpringCloudGateway是当前使用非常广泛的一种API网关。它本身能力并不能完全满足企业对网关的期望,人们希望它可以提供更多的服务治理能力。但SpringCloudGateway并不

谷歌云重磅推出混合云平台Anthos,兼容竞争对手云服务 | Google Cloud Next’19

大数据文摘出品作者:蒋宝尚、周素云当地时间4月9日,谷歌云年度盛会GoogleCloud Next’19在旧金山的Moscone召开。在会上,谷歌云的新任CEO,曾经的甲骨文二号人物ThomasKur

AWS在中国开通三个CloudFront站点,可降31%的延迟

4月23日,北京消息,亚马逊旗下公司AmazonWebServices,Inc.(AWS)今天宣布,通过与宁夏西云数据科技有限公司(简称西云数据)协作,在中国开通三个由西云数据运营的AmazonClo

揭秘青云QingCloud第二代云主机性能提升4倍的背后

前不久,青云QingCloud正式推出第二代企业型云主机,其搭载第二代英特尔至强可扩展处理器,采用独享CPU模式,可提供更高更稳定的计算性能,并针对人工智能工作负载进行优化,性能提升400%,满足企业

Spring Cloud Alibaba 教程 | Nacos(四)

Nacos环境隔离Nacos管理台有一个单独的菜单“命名空间”,里面默认存在一个名为“public”的默认命名空间,我们在使用Nacos时不管是作为注册中心还是配置中心,都是作用在该命名空间之下的,那

Spring Cloud Alibaba 教程 | Nacos(五)

扩展配置(extendedconfigurations)通过之前的学习,我们知道应用引入nacos配置中心之后默认将会加载DataID=${prefix}-${spring.profiles.acti

LeanCloud 2019 回顾

在过去的一年里,数万新用户选择了LeanCloud,开发者在我们的平台上创建了数万新应用。尽管在6月遇到了一些因外部因素带来的困难,2019年仍然是LeanCloud实现整体盈利的第一年。这离不开用户

nodejs怎么运行项目?

nodejs怎么运行项目?想要运行nodeJS项目,只需要安装好node的环境就可以了,不需要其他的配置。使用cmd命令,打开window窗口,输入node-v,如果运行的结果是nodeJS的一个版本