Cordova打包Vue项目成APK

在打包之前,确保环境安装成功,各方面都没有错误,不然会吃很多苦头,关于其他的环境安装在另外一篇文章中记录。本文中所有操作皆是在vscode中操作。

  1. 创建cordova工程,不然打包的时候会报当前目录不是一个Cordova项目:
    在这里插入图片描述
    其中hello是目录名字,org.single.www 是包名,world是目录名字,创建好的cordova工程目录下有如下文件:
    在这里插入图片描述

  2. 进入到创建的目录下,为项目添加android环境:cordova platforms add android
    在这一步的时候很多人都会报错,而且是各种各样的错误,有的是android版本问题,有的是SDK里面文件缺失,点击查看解决办法,这是我整理的过程中遇到的问题,后期会不断补充。
    在这里插入图片描述
    上面是添加成功的样子。测试一下整体环境是否正确:cordova requirements
    在这里插入图片描述
    如果android环境不正确,这里会报错,还有gradle文件建议自己下载,不要等,反正我的如果是让他自行下载配置的话需要两三个小时而且中间会连接失败,这个自己按照他给的网址复制到迅雷里面下载(亲测有效,速度还快),这个下载下来需要配置,此处略过。

  3. 创建Vue项目,先创建目录,在目录里面创建Vue项目:
    在这里插入图片描述

    • 安装vue:cnpm install vue
      在这里插入图片描述
    • 安装webpack:cnpm install webpack -g:
      在这里插入图片描述
    • 安装vue脚手架:cnpm install vue-cli -g:
      在这里插入图片描述
    • 根据模板创建项目:vue init webpack hello,其中hello是项目名称:
      在这里插入图片描述
      这个报错信息暂时不用管,我在测试的时候未影响项目的正常运行
    • 进入项目文件夹下,运行项目:
      在这里插入图片描述
      这里我每次都报错,解决办法是执行npm install命令:
      在这里插入图片描述
      这一处一般不会报错,但是如果报错的话执行cnpm install命令:
      在这里插入图片描述
      这样就成功了,之后执行npm run dev命令,就可以看到运行结果,因为未写代码,初始化的项目运行成功之后如下图:
      在这里插入图片描述
      在这里插入图片描述
  4. 我们假设你的Vue项目是没有问题且经过测试,现在来进行最后一步打包成apk文件安装在手机上:

    1. 首先将vue项目打包,在不修改任何配置文件的情况下,执行语句:cnpm run build会生成dist文件夹,然后我们再将dist文件夹下的内容放到cordova项目的www文件夹下,这里我们可以通过配置文件省略此步骤,修改config/index.js文件,将build内的内容修改一部分:
      在这里插入图片描述
      只修改此部分,切勿删除build内的其他内容,配置文件在没摸清的情况下不要轻易改动!!
    2. 假设vue项目已经打包成功,现在进行cordova打包:cordova build android
      在这里插入图片描述
      打包成功会有如下提示,这时我们到提示的目录下找到这个apk文件就可以了,放到手机上就可以安装了。
      在这里插入图片描述

最后的最后,下面是我在打包过程中遇到过的一些问题以及解决方案,都是经常会用到的,希望有用!!!
https://blog.csdn.net/single_cong/article/details/84073316

猜你喜欢

转载自blog.csdn.net/single_cong/article/details/84062127