资讯专栏INFORMATION COLUMN

用cordova+vue-cli 打包成 android apk 过程和路径问题

JellyBool / 2247人阅读

摘要:简介最近用框架写安卓版,本来打算用打包成文件即可,但发现配置起来复杂,还不如自己搭建环境,用工具提供的命令在终端实现,下面介绍遇到的问题及解决。

简介:最近用vue-cli框架写安卓版APP,本来打算用Hbuilder打包成.apk文件即可,但发现配置起来复杂,还不如自己搭建环境,用cordova工具提供的命令在终端实现,下面介绍遇到的问题及解决。
一、打包过程
首先要有node环境,然后用 npm install -g cordova,

终端或powershell里,执行 cordova create resume com.dls myresume

其中resume是项目目录,com.dls是包名,myresume是应用程序的显示标题

1.执行 npm run build 之后,复制vue项目中 dist 下面的文件,到创建好的 resume 项目的 www 文件下
复制

2.将终端切换到创建的resume项目目录:cd resume
执行 cordova platforms add android --save 这里的平台名称可以是其他,我打包的是apk,所以使用安卓平台。

3.执行 cordova platform ls 来检查当前设置状况

4.执行 cordova requirements 来检查打包条件JDK、SDK、Gradle

jdk必须安装1.8*版本的,另外注意环境变量配置正确,一定要新建系统变量,命名成特定名称,不能直接把安装路径写在系统变量Path后面,例如Java JDK,新建系统变量名为JAVA_HOME,变量值为JDK的安装路径,然后在系统变量Path中,将 %JAVA_HOME%bin; %JAVA_HOME%jrebin追加到变量值后面。详情见 https://segmentfault.com/a/11...

5.执行 cordova build android 开始打包,初次打包需要下载Gradle配置文件,有点慢。

打包完毕会出现打包后生成的.apk文件路径

把路径粘到窗口回车就可以看见打包好的.apk文件了

二、问题

在手机上打开后灰屏,cordova打包的是www文件夹下的内容,也就是说,内容应该都在www文件夹下面,而我们的源代码要放到src下面去,vue-cil的index.html是在根路径下面的,所以需要修改打包配置。
首先,打开vue-cli项目的config下的index.js,将build里assetsPublicPath的值由"/"改为"./"

然后,打开vue-cli项目的build下的util.js,将打包构建时提取css的公共路径往上加两层,详见图:

这样修改之后,在 npm run dev 浏览器环境下预览会有问题,但在手机上可以成功预览。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/15020.html

相关文章

  • cordova+vue-cli 打包 android apk 过程路径问题

    摘要:简介最近用框架写安卓版,本来打算用打包成文件即可,但发现配置起来复杂,还不如自己搭建环境,用工具提供的命令在终端实现,下面介绍遇到的问题及解决。 简介:最近用vue-cli框架写安卓版APP,本来打算用Hbuilder打包成.apk文件即可,但发现配置起来复杂,还不如自己搭建环境,用cordova工具提供的命令在终端实现,下面介绍遇到的问题及解决。一、打包过程首先要有node环境,然后...

    LucasTwilight 评论0 收藏0
  • cordova+vue-cli 打包 android apk 过程路径问题

    摘要:简介最近用框架写安卓版,本来打算用打包成文件即可,但发现配置起来复杂,还不如自己搭建环境,用工具提供的命令在终端实现,下面介绍遇到的问题及解决。 简介:最近用vue-cli框架写安卓版APP,本来打算用Hbuilder打包成.apk文件即可,但发现配置起来复杂,还不如自己搭建环境,用cordova工具提供的命令在终端实现,下面介绍遇到的问题及解决。一、打包过程首先要有node环境,然后...

    Forest10 评论0 收藏0
  • vue+Cordova

    摘要:系列安装安装搭建工程注自定义命名工程加入注自定义命名注意事项修改目录下的执行时,会把打包内容指定到文件夹内,根据文件夹内容构建。添加平台在加平台前,需要修改的内容,包名的命名一般是,与申请微信时所用的包名对应。 vue-cordova vue2.0系列+Cordova 安装vue-cli npm install -g vue-cli 安装Cordova npm install -g c...

    刘厚水 评论0 收藏0
  • Cordova 打包 Android release app 过程详解

    摘要:上面的命令意思是,生成一个的文件,别名为。然后我们就可以用下面的命令对签名了这个命令中需要传入证书名,要签名的,和别名。最后我们要用压缩和优化这一步会生成最终的,我们把它命名为。 TL;DR Android app 的打包分为 debug 和 release 两种,后者是用来发布到应用商店的版本。这篇文章会告诉你 Cordova 如何打包 Android release 版本,也会让你...

    kk_miles 评论0 收藏0
  • 使Cordova将您的前端JavaScript应打包手机原生应

    摘要:以框架为例,能将您的前端应用里的和资源打包成原生的文件,可以直接在安卓手机上安装。使用的包管理器安装。这些自动生成的东西都是最后打包生成安卓应用文件所必须的。 假设我用JavaScript和HTML开发了一个前端应用,我想把该应用打包成能直接在手机上安装和运行(不通过浏览器)的原生应用,例如像下面这样。对应用的用户来说,他们得到的用户体验和真正的用Android Studio或者XCo...

    RyanQ 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<