人生难得几回搏，此时不搏待何时。这篇文章主要讲述cordova+vue-cli4构建app相关的知识，希望能为你提供帮助。

• 欢迎加入前端交流群来获取视频资料以及前端学习资料：749539640 *

本文会详细的介绍如何使用cordova来打包vue项目，生成app（android）你将学会：

• 基于cordova构建vue项目app
• 自定义app名字/图标/启页图片
• 自动构建脚本

Cordova(中文官网详细介绍)是一个开源的移动开发框架。允许你用标准的web技术-html5,CSS3和javascript做跨平台开发,应用的实现是通过web页面，默认的本地文件名称是index.html
大体思路就是把打包好的vue项目放在cordova的Web App中来启动；我们开始吧

1.环境准备

• java SDK 8(cordova最高支持到8)下载地址
  • window环境配置
  • linux环境配置
  • mac Os环境配置
• Gradle
• Cordova 8.0
• Node
• vue-cli
• Android Studio /Android SDK
  • Android Studio
  • Android SDK

2.验证环境
文章图片

• 项目目录

cordova │cordova-project │my-app

这里把cordova项目和vue项目平级存放，也可以嵌套（自行看情况）
3.新建cordova项目

• 3.1新建cordova目录
• 3.2在cordova文件夹下新建cordova项目

mkdir cordova cd cordova cordova create cordova-project

• 3.3添加Android平台

cd cordova-project cordova platform add android --save

要构建和运行App，你需要安装每个你需要平台的SDK。另外，当你使用浏览器开发你可以添加 browser平台，它不需要任何平台SDK。

• 3.4 检测你是否满足构建平台的要求:

cordova requirements

文章图片

• 3.5打包app安装到手机上（前提是手机连上电脑并开启USB调试模式）

cordova run android

• 或者只是打包apk

cordova build android

apk生成目录：cordova-project/platforms/android/app/build/outputs/apk/debug/app-debug.apk
默认生成的cordova app 图标：

文章图片

运行界面：

文章图片

进行到这里的时候，cordova部分先告一段落，下面开始第二部分
4.新建vue项目（vue-cli）

cd cordova vue create my-app //配置里我们选择默认项就行default (babel, eslint) cd my-app npm install npm run serve

• 4.1浏览器运行vue项目界面：

文章图片

• 4.2打包vue项目
• 配置vue.config.js
• my-app目录下新建vue.config.js（这里只做路径配置，其他配置项可详情vue.config.js）

默认情况下，cordova create命令生成基于web的应用程序的骨骼，项目的主页是 www/index.html 文件。

\'use strict\'module.exports = { publicPath: \'./\', //这个值也可以被设置为空字符串 (\'\') 或是相对路径 (\'./\')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径，也可以用在类似 Cordova hybrid 应用的文件系统中。 outputDir: \'../cordova-project/www\', //将打包目录指向/cordova-projec下的www productionSourceMap: false, //如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。}

• 配置好之后我们进行打包

npm run build

• 4.3打包apk安装到手机上

cd cordova-project cordova run android

或者是打包apk

cd cordova-project cordova build android

运行至手机界面：

文章图片

5.浏览器调试app运行cordova run android 后，app会装到手机上
谷歌浏览器输入：chrome://inspect/#devices
看到如下界面：

文章图片

找到自己的设备（手机中也需要运行app），点击inspect，接下来就可以调试样式了

文章图片

6.更换app图标以及app名字以及app启动页先随便准备2张图片（图标以及启动页图片）

• 6.1更改图标：

文章图片

进入文件夹：cordova/cordova-project/res/icon/android
将图片进行替换即可（名字/图片格式推荐png）

文章图片

替换为：

文章图片

• 6.2更改启动页图片：

文章图片

安装splashscreen插件：

cd cordova-project cordova plugin add cordova-plugin-splashscreen

进入文件夹：/cordova/cordova-project/res/screen/android
将图片进行替换即可,这里只替换了竖屏的（名字/图片格式推荐png）

文章图片

替换为

文章图片

• 打开config.xml
• 6.3更改名字(name标签内的内容进行更改即可)

< name> vueApp< /name>

• 6.4更改配置项

添加图标以及启动页，在 < platform name="android"> < /platform> 添加如下代码

< platform name="android"> < allow-intent href="https://www.songbingjia.com/android/market:*" /> < icon density="ldpi" src="https://www.songbingjia.com/android/res/icon/android/icon-36-ldpi.jpg" /> < icon density="mdpi" src="https://www.songbingjia.com/android/res/icon/android/icon-48-mdpi.jpg" /> < icon density="hdpi" src="https://www.songbingjia.com/android/res/icon/android/icon-72-hdpi.jpg" /> < icon density="xhdpi" src="https://www.songbingjia.com/android/res/icon/android/icon-96-xhdpi.jpg" /> < splash density="port-ldpi" src="https://www.songbingjia.com/android/res/screen/android/screen-ldpi-portrait.png" /> < splash density="port-mdpi" src="https://www.songbingjia.com/android/res/screen/android/screen-mdpi-portrait.png" /> < splash density="port-hdpi" src="https://www.songbingjia.com/android/res/screen/android/screen-hdpi-portrait.png" /> < splash density="port-xhdpi" src="https://www.songbingjia.com/android/res/screen/android/screen-xhdpi-portrait.png" /> < preference name="ShowSplashScreenSpinner" value="https://www.songbingjia.com/android/false" /> < !-- 启动页面淡入淡出的效果 --> < /platform>

• 打包查看
  图标以及名字：
  
  文章图片
  
  启动页：
  
  文章图片
  

7.自动构建脚本（shell）每次打包需要执行如下命令，很麻烦

cd cordova/my-app npm install npm run build cd ../cordova-project cordova build android /cordova run android

我们可以在cordova目录下新建build.sh文件

#!/usr/bin/env bashPLATFORM=android #!1(not clean)0(clean) TYPE=build #!(-d)debugbuild TYPE=$1 function echo_action() { INFO_START=\'\\033[1; 36m\' INFO_END=\'\\033[0m\' echo -e "\\xF0\\x9F\\x90\\xB6 ${INFO_START}$1${INFO_END}" }function echo_info() { INFO_START=\'\\033[1; 32m\' INFO_END=\'\\033[0m\' echo -e "\\xF0\\x9F\\x92\\x9A ${INFO_START}$1${INFO_END}" }function echo_warn() { INFO_START=\'\\033[1; 33m\' INFO_END=\'\\033[0m\' echo -e "\\xF0\\x9F\\x92\\x9B ${INFO_START}$1${INFO_END}" }function echo_err() { INFO_START=\'\\033[1; 31m\' INFO_END=\'\\033[0m\' echo -e "\\xF0\\x9F\\x92\\x94 ${INFO_START}$1${INFO_END}" }function addAndroidPlatform() { echo_action "Start add android platform ..." cordova platform add android if [ "$?" != "0" ]; then return 1 fi return 0 }function installDependencesCordova() { echo_action "Installing Cordova dependences ..." npm install echo_info " Cordova Dependences installed" }function installDependences() { echo_action "Installing dependences ..." echo_action "cd ./my-app" cd ./my-app npm install echo_info "Dependences installed" }function buildWebapp() { echo_action "Start building my-app..." npm run build echo_info "Build Command:npm run build"}function installPlugins() { addAndroidPlatform echo_info "Install App Updater plugin finished" }function buildApk() { echo_action "Start building ..." if [ "${TYPE}" == "debug" ]; then cordova run android echo_info "Build Command:cordova run android" else cordova build android echo_info "Build Command:cordova build android" fi }echo_info "Build for ${PLATFORM}" if [ "${TYPE}" == "debug" ]; then echo_info "Build Command:cordova run android" else echo_info "Build Command:cordova build android" fiinstallDependences if [ "$?" == "0" ]; then echo_info "All dependences have been installed successfully." else echo_err "Failed to install dependences." fibuildWebapp if [ "$?" == "0" ]; then echo_info "All things done successfully." else echo_err "Build failed." fiecho_action "cd ../cordova-project" cd ../cordova-projectinstallPlugins if [ "$?" == "0" ]; then echo_info "All plugins have been installed successfully." else echo_err "Failed to install plugins." fiinstallDependencesCordova if [ "$?" == "0" ]; then echo_info "All dependences have been installed successfully.." else echo_err "Failed to install dependences." fibuildApk if [ "$?" == "0" ]; then echo_info "All things done successfully." else echo_err "Build failed." fi

【cordova+vue-cli4构建app】这样我们下次就可以

cd cordova ./build.sh build //打包apk ./build.sh debug //调试至手机

8.vue中使用cordova,详情vue-cordova

推荐阅读

• 

  血粘稠的5种征兆 别觉得无所谓
• 

  mysql在家怎么连接 mysql80怎么连接
• 

  泡好的木耳超过多长时间就不能吃了
• 

  大蒜炒荸荠——清热解毒降压降糖
• 

  不想成为你口中的好人，宁愿做你枕边梦里的“死鬼”。
• 

  木耳菜吃前必须要焯水吗 木耳菜爬藤好还是不爬藤好
• 

  天龙八部手游快速升级的20条心得分享
• 

  04.19阿紫菇凉谈在变现学院收获成长
• 

  dub-al00是什么手机（dub-al00的手机型号是什么）
• 

  什么是色织青年布色织学生布
• 

  怎么查出行要不要核酸检测
• 

  极其罕见珍贵的南京屠城照 南京大屠杀80周年
• 

  python实现有效的括号判断实例代码
• 

  大学的生活
• 

  骨关节炎|老年人经常腿疼，一半以上的人是因为它——骨关节炎！
• 

  更年期综合症的表现都有哪些 更年期综合症的表现都有哪些
• 

  旗舰|小屏旗舰之争——三星S20对比iPhone12mini
• 

  螺狮粉怎么做
• 

  电商抢单什么意思 电商抢跑什么意思，淘宝抢跑什么意思
• 

  第十章，走散

• 混合 App 打开 H5 调试开关
• odoo中的mapped
• uni-app微信小程序入门
• 德比足球_德比APP_皇马靠防守追平巴萨
• Mac使用安卓模拟器-网易MuMu
• Android短视频滑动播放
• 使用Android Studio创建Andorid模拟器
• Android中使用SeekBar拖动条实现改变图片透明度
• Python模拟测试权威入门