说明:
当前有一个vue项目,需要使用cordova进行打包
环境条件:
1 jdk-即Java运行环境
这个很简单,百度一下就行,学过Java的话都有安装过jdk
检查电脑是否安装了jdk:win+R->输入cmd->回车进入黑窗口,输入javac->如果出现关于javac的帮助信息则表示已安装
2 安装nodejs环境
相信一般要打包vue项目肯定开始也是装了nodejs了
查看是否安装了nodejs:node -v(如果出现了版本号则表示安装了)
3 然后需要安装android SDK
3.1 首先需要下载android SDK Tools(别下错了)
这里提供一个下载地址:http://www.androiddevtools.cn/ 进去之后搜索SDK Tools,我下载的是这个压缩包版的
下载完之后解压这个压缩包,解压后如下:
双击打开SDK Manager应用程序,打开后需要下载一切东西如下:
1 Tools:我这里选了这3个
2 Android API:这里有很多版本的,我选了最新的(后来因为打包时报SDK错误,按照提示我又安装了API 28中的 SDK Platform)
3 最后的Extras:勾选了这2个
这里需要提一下,下载的时候可能会比较慢,按照网上查找的资料,很多都说可以替换一下地址,
左上角的Tools->Options中的server和port内容,但是首先:网上发的有好几个地址都无法访问了,有个可以访问,
但我改了之后重新打开SDK Manager,获取不到内容了,就只剩下下面这样了:所以我这里后来删掉了options的配置,
使用默认的下载了,虽然也等了一会,也不算太久,可以正常下载下来,下载完之后点击close即可
下载好之后,需要给SDK配置环境变量,复制SDK的安装地址,添加到path下即可
此电脑右键->属性->高级系统设置->环境变量->系统变量的Path,
选择编辑->新建->将刚刚复制的地址+tools和platform-tools放到这里
(我这里是添加了一个变量的形式,不用这个也行)->确定
最后,查看是否安装成功:输入:android -h
到这里,android SDK的安装也就结束了
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目录下
上面说的是如果是cli3创建的vue项目,如果是cli2创建的话,则会有一个config目录,下面有一个index.js文件,
修改里面的build当中的内容即可,不用自己新建文件了,如下:原本这里是"/",把这里改成""即可,
后面构建的话也生成生成dist目录,同样在src同级目录下,
同上执行npm run build将dist目录下的内容复制到cordova的www下
5.5 打包
进入到cordova项目目录,执行cordova build android,打包成功如下,并且会打印打的apk包在哪个位置
这里说明一下,最终这里是app-debug.apk,这个名字只是这个文件的名字,我们可以自己随便改,
到时候安装之后app的名字还是最开始创建cordovar项目时那里指定的,这个项目安装之后的名字就是client
到这里打包已经完成了,将.apk的包安装到安卓手机上就可以了,安装之后打开运行看下是不是OK的就行了。