脚本宝典收集整理的这篇文章主要介绍了

cordova+vue+android整合打包成apk

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p>最近想试着打包apk,然后用到cordova平台,vue框架,加上安装Java的jdk,<a href="http://www.js-code.com/tag/android" title="android" target="_blank">android</a>的jdk一堆的环境,对于前端的我来说,安装环境真的是最麻烦的,网上的教程很多,新的旧的都有,跌跌撞撞终于弄出来了,综合一下写下来,留给自己看看。<br />以下我的电脑室windows x64的</p> <p><a href="https://www.cnblogs.com/summary-2017/p/8073225.html" rel="nofollow noreferrer" target="_blank">https://www.cnblogs.com/summa...</a></p> <p><strong>1、安装java sdk</strong><br />首先,去官网下载,<a href="https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html" rel="nofollow noreferrer" target="_blank">https://www.oracle.com/techne...</a>,点击accept license agreenment<br /><span class="img-wrap"><img data-src="/img/bVbgQkn?w=829&amp;h=684" src="/img/bVbgQkn?w=829&amp;h=684" alt="图片描述" title="图片描述" style="cursor: pointer; display: inline;"></span></p> <p>下载好后,双击安装:</p> <p><span class="img-wrap"><img data-src="/img/bVbgQlE?w=504&amp;h=383" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>然后选择好自己要安装的路径:</p> <p><span class="img-wrap"><img data-src="/img/bVbgQoF?w=504&amp;h=383" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>安装JDK的时候,会自动给你安装JRE,选择好自己要安装的路径:</p> <p><span class="img-wrap"><img data-src="/img/bVbgQoY?w=706&amp;h=383" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>安装完成,点击关闭。</p> <p><span class="img-wrap"><img data-src="/img/bVbgQo7?w=504&amp;h=383" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>现在要配置环境变量。新建一个系统环境变量,变量名为JAVA_HOME,变量值为JDK的安装路径:</p> <p><span class="img-wrap"><img data-src="/img/bVbgQqy?w=667&amp;h=190" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>然后在系统变量列表中,双击Path变量,并将 %JAVA_HOME%bin; %JAVA_HOME%jrebin追加到变量值后面(注意,在变量里不要有任何多余的空格):</p> <p><span class="img-wrap"><img data-src="/img/bVbgQq9?w=541&amp;h=570" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>最后验证安装是否成功,打开命令行窗口,在命令提示符下执行javac -version。如果安装成功,就会看到版本号</p> <p><span class="img-wrap"><img data-src="/img/bVbgQso?w=209&amp;h=39" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p><strong>2、安装AndroidSDK</strong><br />首先,下载AndroidSDK,<a href="http://www.androiddevtools.cn/" rel="nofollow noreferrer" target="_blank">http://www.androiddevtools.cn/</a><br />找到对应的sdk tools下载:<br /><span class="img-wrap"><img data-src="/img/bVbgQuT?w=1248&amp;h=519" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>选择一个最新的版本就行了。注意,这里有exe和zip两种文件可供下载,exe的就是个安装程序,下载下来需要自己双击安装。我这里下载zip压缩包,下载后,直接解压缩到你想要安装Android的路径就行了。解压后的文件目录如下:</p> <p><span class="img-wrap"><img data-src="/img/bVbgQx2?w=610&amp;h=169" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>然后就双击“SDK Manager.exe”,启动SDK Manager:<br />这里要装哪些,我也不是很清楚,参考一作者里面讲的(后面会附上参考的文章链接)。装了一些高版本的,然后装上对应的<a href="http://www.js-code.com/tag/android" title="浏览关于“android”的文章" target="_blank" class="tag_link">android</a>版本的<a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a>,下载过程比较慢,这里我android是7.0版本的。<br /><span class="img-wrap"><img data-src="/img/bVbgQQX?w=647&amp;h=499" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span><br /><span class="img-wrap"><img data-src="/img/bVbgQRh?w=624&amp;h=431" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span><br /><span class="img-wrap"><img data-src="/img/bVbgQRk?w=591&amp;h=303" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span><br /><span class="img-wrap"><img data-src="/img/bVbgQRn?w=672&amp;h=250" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>最后一步,设置环境变量。<br />首先,新建一个系统环境变量,变量名为ANDROID_SDK_HOME,变量值为你的SDK安装路径,这里我的安装路径为D:android-sdk-windows,如图所示:<br /><span class="img-wrap"><img data-src="/img/bVbgQSY?w=667&amp;h=190" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_4_expand" style="display:inline-table;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><ins id="aswift_4_anchor" style="display:block;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_4" name="aswift_4" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>然后把”platform-tools“和”tools”路径追加到系统环境变量Path中,%ANDROID_SDK_HOME%platform-tools;%ANDROID_SDK_HOME%tools:<br /><span class="img-wrap"><img data-src="/img/bVbgQTd?w=541&amp;h=570" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>检验一下Android SDK是否安装成功:在命令行窗口中输入”adb version“:<br /><span class="img-wrap"><img data-src="/img/bVbgQT1?w=530&amp;h=64" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p><strong>3、安装gradle</strong><br />首先,下载,<a href="https://services.gradle.org/distributions/" rel="nofollow noreferrer" target="_blank">https://services.gradle.org/d...</a>,我下载的是这个<br /><span class="img-wrap"><img data-src="/img/bVbgQVv?w=932&amp;h=264" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>再来配置环境变量,<br />新建一个系统环境变量,变量名为GRADLE_HOME,变量值为安装路径,这里我的安装路径为D:Program Filesgradle-4.1<br /><span class="img-wrap"><img data-src="/img/bVbgQWS?w=667&amp;h=190" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>系统变量追加path,%GRADLE_HOME%bin。<br /><span class="img-wrap"><img data-src="/img/bVbgQWU?w=541&amp;h=570" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>到这里,环境算是安装完成了</p> <p><strong>4、cordova+vue</strong><br />现在来搭建cordova平台,和vue项目。</p> <ul> <li>全局安装<a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>js</li> </ul> <p><a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>安装:直接进入官网<a href="https://nodejs.org/zh-cn/" rel="nofollow noreferrer" target="_blank">https://nodejs.org/zh-cn/</a>,验证安装成功:node -v<br />npm安装:新版的nodejs已经集成了npm,所以node安装时npm也一并安装好了。验证安装成功: npm -v</p> <ul> <li>全局安装cordova</li> </ul> <p>执行命令:npm install -g cordova,验证安装成功:cordova -v<br /><span class="img-wrap"><img data-src="/img/bVbgQ2O?w=108&amp;h=34" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <ul> <li>新建cordova项目</li> </ul> <p>执行命令:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="cordova create myproject com.example.myproject myproject cd myproject cordova platforms add android" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs properties"><code><span class="hljs-attr">cordova</span> <span class="hljs-string">create myproject com.example.myproject myproject</span> <span class="hljs-attr">cd</span> <span class="hljs-string">myproject</span> <span class="hljs-attr">cordova</span> <span class="hljs-string">platforms add android</span></code></pre> <ul> <li>新建vue项目</li> </ul> <p>直接在cordova项目根目录中创建vue项目:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install -g vue npm install -g vue-cli vue init webpack vue-app cd vue-app npm install" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs properties"><code><span class="hljs-attr">npm</span> <span class="hljs-string">install -g vue</span> <span class="hljs-attr">npm</span> <span class="hljs-string">install -g vue-cli</span> <span class="hljs-attr">vue</span> <span class="hljs-string">init webpack vue-app</span> <span class="hljs-attr">cd</span> <span class="hljs-string">vue-app</span> <span class="hljs-attr">npm</span> <span class="hljs-string">install</span></code></pre> <p><span class="img-wrap"><img data-src="/img/bVbgQ83?w=283&amp;h=285" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>修改<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>项目config/index.js文件.<br /><span class="img-wrap"><img data-src="/img/bVbgQ9S?w=1224&amp;h=431" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>编译vue项目文件</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm run build" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs nginx"><code style="word-break: break-word; white-space: initial;"><span class="hljs-attribute">npm</span> run build</code></pre> <p>就可以直接编译vue项目自动到cordova主目录下的www文件夹中。</p> <ul> <li>调试打包apk软件</li> </ul> <p>首先,检查整体环境:<br /><code>cordova requirements</code><br />我这里貌似少个虚拟机,但是对打包apk也没有影响,后面再继续研究<br /><span class="img-wrap"><img data-src="/img/bVbgRci?w=520&amp;h=319" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>执行命令:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="cordova build android" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs nginx"><code style="word-break: break-word; white-space: initial;"><span class="hljs-attribute">cordova</span> build android</code></pre> <p><span class="img-wrap"><img data-src="/img/bVbgRdP?w=779&amp;h=355" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>后面的apk签名还没弄...,先写一半</p> <p>注意:<br />1、首次使用时,命令行提示 Downloading <a href="https://services.gradle.org/distributions/gradle-4.1-all.zip" rel="nofollow noreferrer" target="_blank">https://services.gradle.org/d...</a>,是在下载对应的gradle并自动解压安装,根据网络状况,可能耗时极长,且容易报错。<br /><strong>可以这么运行</strong> 将下载的zip文件放一份在gradle文件下:<br /><span class="img-wrap"><img data-src="/img/bVbgRmZ?w=332&amp;h=330" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>修改对应文件的路径:<br /><span class="img-wrap"><img data-src="/img/bVbgRno?w=1703&amp;h=368" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>2、安装SDK Manager.exe的时候可能会出现闪退的情况,可以参考这的文章:<br />【转载】<a href="https://blog.csdn.net/puma004/article/details/11392271" rel="nofollow noreferrer" target="_blank">https://blog.csdn.net/puma004...</a><br />3、安装SDK Manager.exe项次的时候,可以参考这的文章:<br />【转载】<a href="https://www.cnblogs.com/xiongwei/articles/8042667.html" rel="nofollow noreferrer" target="_blank">https://www.cnblogs.com/xiong...</a></p>

总结

以上是脚本宝典为你收集整理的

cordova+vue+android整合打包成apk

全部内容,希望文章能够帮你解决

cordova+vue+android整合打包成apk

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过