欢迎加入前端交流群获取视频资料和前端学习资料：749539640*本文将详细介绍如何使用cordova打包vue项目并生成app（android)你将学习：基于cordova构建vue项目app自定义app名称/图标/打开页面图片自动构建脚本Cordova（中文官网有详细介绍）是一个开源的移动开发框架。允许您使用标准的网络技术——HTML5、CSS3和JavaScript进行跨平台开发。应用程序的实现是通过网页。默认的本地文件名为index.html。大致思路是将打包好的vue项目放在cordovaWebApp中启动；开始吧1.环境准备JavaSDK8（cordova最多支持8个）下载地址window环境配置linux环境配置macOs环境配置GradleCordova8.0Nodevue-cliAndroidStudio/AndroidSDKAndroidStudioAndroidSDK2.验证环境项目目录cordova│cordova-project│my-app这里cordova项目和vue项目同级存放，也可以嵌套（自己看情况）3.新建cordova项目3.1创建一个新建cordova目录3.2在cordova文件夹下新建cordova工程mkdircordovacdcordovacordovacreatecordova-project3.3addAndroidplatformcdcordova-projectcordovaplatformaddandroid--save要构建并运行App，需要安装SDKfor您需要的每个平台。另外，当你使用浏览器开发时，你可以添加浏览器平台，它不需要任何平台SDK。3.4查看是否满足搭建平台要求：cordovarequirements3.5打包app安装到手机上（前提是手机连接电脑，并且开启USB调试模式）cordovarunandroid或者直接packageapkcordovabuildandroidapk生成目录：cordova-project/platforms/android/app/build/outputs/apk/debug/app-debug.apk默认生成的cordovaapp图标：运行界面：到了这里，cordova部分先告一段落，下面开始第二部分4.新建一个vue项目（vue-cli）cdcordovavuecreatemy-app//配置中，我们选择默认项。default(babel,eslint)cdmy-appnpminstallnpmrunserve4.1浏览器运行vue项目界面：4.2packagevue项目配置vue。在config.jsmy-app目录下新建vue.config.js（这里只做路径配置，其他配置项可以在vue.config.js中详细说明）默认情况下，cordovacreate命令生成一个web的骨架基于应用程序，项目的主页是www/index.html文件。'usestrict'module.exports={publicPath:'./',//这个值也可以设置为空字符串（''）或者相对路径（'./'），这样所有的资源都会被链接起来是相对路径，所以输出包可以部署在任意路径，也可以在类似Cordova混合应用的文件系统中使用。outputDir:'../cordova-project/www',//将打包目录指向/cordova-project.productionSourceMap下的www:false,//如果不需要生产环境的sourcemap，可以设置将其设置为false以加快构建生产环境。}配置完成后，我们打包npmrunbuild4.3packageapk安装到手机上cdcordova-projectcordovarunandroid或者packageapkcdcordova-projectcordovabuildandroid运行到手机界面：5.之后浏览器调试app，运行cordovarunandroid，app就会安装到手机上。谷歌浏览器输入：chrome://inspect/#devices看到如下界面：找到自己的设备（也需要在手机上运行app），点击inspect，即可调试样式6.替换App图标、app名称、app启动页首先准备2张图片（图标和启动页图片）6.1更换图标：进入文件夹：cordova/cordova-project/res/icon/android更换图片（名称/图片格式推荐为png）替换为：6.2更改启动页图片：安装splashscreen插件：cdcordova-projectcordovapluginaddcordova-plugin-splashscreen进入文件夹：/cordova/cordova-project/res/screen/android替换图片是的，这里只替换竖屏（名称/图片格式推荐png）打开config。添加图标和启动页，在中添加如下代码封装视图iconandname:startPage:7.自动构建脚本（shell）每次打包都需要执行以下命令，很麻烦cdcordova/my-appnpminstallnpmrunbuildcd../cordova-projectcordovabuildandroid/cordovarunandroid我们可以在cordova目录中创建一个新的构建。shfile#!/usr/bin/envbashPLATFORM=android#!1(notclean)0(clean)TYPE=build#!(-d)debugbuildTYPE=$1functionecho_action(){INFO_START='\033[1;36米'INFO_END='\033[0m'echo-e"\xF0\x9F\x90\xB6${INFO_START}$1${INFO_END}"}functionecho_info(){INFO_START='\033[1;32m'INFO_END='\033[0m'echo-e"\xF0\x9F\x92\x9A${INFO_START}$1${INFO_END}"}functionecho_warn(){INFO_START='\033[1;33m'INFO_END='\033[0m'echo-e"\xF0\x9F\x92\x9B${INFO_START}$1${INFO_END}"}functionecho_err(){INFO_START='\033[1;31m'INFO_END='\033[0m'echo-e"\xF0\x9F\x92\x94${INFO_START}$1${INFO_END}"}functionaddAndroidPlatform(){echo_action"开始添加android平台..."cordovaplatformaddandroidif["$?"!="0"];然后return1fireturn0}functioninstallDependencesCordova(){echo_action"正在安装Cordova依赖项..."npminstallecho_info"已安装Cordova依赖项"}functioninstallDependences(){echo_action"正在安装依赖项..."echo_action"cd./my-app"cd./my-appnpminstallecho_info"依赖installed"}functionbuildWebapp(){echo_action"开始构建我的应用程序..."npmrunbuildecho_info"构建命令：npmrunbuild"}functioninstallPlugins(){addAndroidPlatformecho_info"安装AppUpdater插件完成"}functionbuildApk(){echo_action"Startbuilding..."if["${TYPE}"=="debug"];thencordovarunandroidecho_info"BuildCommand:cordovarunandroid"elsecordovabuildandroidecho_info"BuildCommand:cordovabuildandroid"fi}echo_info"Buildfor${PLATFORM}"if["${TYPE}"=="debug"];thenecho_info"BuildCommand:cordovarunandroid"elseecho_info"BuildCommand:cordovabuildandroid"fiinstallDependencesif["$?"=="0"];thenecho_info"所有依赖安装成功。"elseecho_err"安装依赖失败。"fibuildWebappif["$?"=="0"];thenecho_info"所有事情都安装成功."elseecho_err"Buildfailed."fiecho_action"cd../cordova-project"cd../cordova-projectinstallPluginsif["$?"=="0"];thenecho_info"所有插件已安装成功。"elseecho_err"安装失败plugins."fiinstallDependencesCordovaif["$?"=="0"];thenecho_info"所有依赖已经安装成功.."elseecho_err"安装依赖失败."fibuildApkif["$?"=="0"];thenecho_info"Allthingsdonesuccessfully."elseecho_err"Buildfailed."fi以便我们下次可以cdcordova./build.shbuild//打包apk./build.shdebug//调试到手机8.vue使用cordova，详解vue-cordova
