说明:

当前有一个vue项目,需要使用cordova进行打包

 

环境条件:

1 jdk-即Java运行环境

   这个很简单,百度一下就行,学过Java的话都有安装过jdk

   检查电脑是否安装了jdk:win+R->输入cmd->回车进入黑窗口,输入javac->如果出现关于javac的帮助信息则表示已安装

   使用cordova对vue项目进行打包(android)

2 安装nodejs环境

   相信一般要打包vue项目肯定开始也是装了nodejs了

   查看是否安装了nodejs:node -v(如果出现了版本号则表示安装了)

   使用cordova对vue项目进行打包(android)

3 然后需要安装android SDK

   3.1 首先需要下载android SDK Tools(别下错了)

         这里提供一个下载地址:http://www.androiddevtools.cn/    进去之后搜索SDK Tools,我下载的是这个压缩包版的

        使用cordova对vue项目进行打包(android)

         下载完之后解压这个压缩包,解压后如下:

         使用cordova对vue项目进行打包(android)

          双击打开SDK Manager应用程序,打开后需要下载一切东西如下:

          1 Tools:我这里选了这3个

           使用cordova对vue项目进行打包(android)

           2  Android API:这里有很多版本的,我选了最新的(后来因为打包时报SDK错误,按照提示我又安装了API 28中的                                                  SDK Platform

           使用cordova对vue项目进行打包(android)

           3 最后的Extras:勾选了这2个

           使用cordova对vue项目进行打包(android)

           这里需要提一下,下载的时候可能会比较慢,按照网上查找的资料,很多都说可以替换一下地址,

           左上角的Tools->Options中的server和port内容,但是首先:网上发的有好几个地址都无法访问了,有个可以访问,

           但我改了之后重新打开SDK Manager,获取不到内容了,就只剩下下面这样了:所以我这里后来删掉了options的配置,

           使用默认的下载了,虽然也等了一会,也不算太久,可以正常下载下来,下载完之后点击close即可

           使用cordova对vue项目进行打包(android)

           下载好之后,需要给SDK配置环境变量,复制SDK的安装地址,添加到path下即可

           使用cordova对vue项目进行打包(android)

          此电脑右键->属性->高级系统设置->环境变量->系统变量的Path,

          选择编辑->新建->将刚刚复制的地址+tools和platform-tools放到这里

          (我这里是添加了一个变量的形式,不用这个也行)->确定

          使用cordova对vue项目进行打包(android)

          最后,查看是否安装成功:输入:android -h

          到这里,android SDK的安装也就结束了

          使用cordova对vue项目进行打包(android)

4 安装gradle(不太确定是不是要安装,我这里是安装了的)

   这里可以直接看下这篇博客:https://blog.csdn.net/yao_94/article/details/81211528

 

打包

5 到这里环境其实已经差不多搭好了,接下来就可以准备打包了

   5.1 安装cordova:如果没有安装cordova需要先安装cordova:npm install -g cordova

   5.2 选择一个目录,创建一个cordova项目:cordova create hello(项目名) com.pink.puck client(安装之后app的名字)

   5.3 cd到项目目录下(www同级目录),添加平台:cordova platform add android

   5.4 如果是vue-cli3创建的项目,很多文件是没有的,比如config文件夹没有,自然也就没有里面的index.js

        所以cli3则需要在vue项目下(即src同级目录)新建一个vue.config.js文件,在里面配置: 

        module.exports = {
                  publicPath: '',
        }

        执行npm run build进行项目构建,构建成功之后会生成一个dist目录,在scr同级,将dist目录下的东西都复制到之前创建的

        cordova项目下的www目录下,覆盖www已有的文件(可以先删掉www目录下的内容再粘贴进去)

        注:如果vue.config.js中配置了这个,则生成到的目录名就是bibibox-wb,然后下面会有一个asserts目录,

               js和css都在这个目录下,没有assertDir的话则js和css直接在bibibox-wb目录下

                使用cordova对vue项目进行打包(android)

                使用cordova对vue项目进行打包(android)

         上面说的是如果是cli3创建的vue项目,如果是cli2创建的话,则会有一个config目录,下面有一个index.js文件,

         修改里面的build当中的内容即可,不用自己新建文件了,如下:原本这里是"/",把这里改成""即可,

         后面构建的话也生成生成dist目录,同样在src同级目录下,

         同上执行npm run build将dist目录下的内容复制到cordova的www下

         使用cordova对vue项目进行打包(android)

   5.5 打包

         进入到cordova项目目录,执行cordova build android,打包成功如下,并且会打印打的apk包在哪个位置

         使用cordova对vue项目进行打包(android)

        这里说明一下,最终这里是app-debug.apk,这个名字只是这个文件的名字,我们可以自己随便改,

        到时候安装之后app的名字还是最开始创建cordovar项目时那里指定的,这个项目安装之后的名字就是client

        到这里打包已经完成了,将.apk的包安装到安卓手机上就可以了,安装之后打开运行看下是不是OK的就行了。

相关文章: