前期踩坑，简单带过：

如果你还不知道怎么安装cordova，创建一个cordova项目，请移步w3school看下Cordova教程，然后再摸索一下。

如果你不清楚vue-cli项目的搭建和打包，emmm，建议先学习一下，一步一个脚印

当你创建好cordova项目的时候，把vue打包好的项目dist下的内容全部复制覆盖到cordova项目里面的www文件夹中。然后再来踩坑吧

1. JDK版本 只能是1.8 其实官网首页就有的下

15691406-6353f9c253c34dd4.png

2. Gradle环境变量配置 自行搜教程

开始-Vue打包踩坑

一. 使用vue-cordova插件

1.安装方式

️用vue ui安装简单 可视化

️使用npm

npm install vue-cordova --save

2.在main.js里面引入使用

import VueCordova from 'vue-cordova'
Vue.use(VueCordova)

二. 修改vue.config.js

这个文件在项目根目录 也就是 package.json同级文件。如果没有这个文件 就创建一个js文件 名为vue.config

module.exports = {
  publicPath: '',
};

然后cordova打包，已经可以顺利跑起来了。
下面讲点击两次返回按键退出应用以及沉浸式状态栏

一. cordova监听返回退出按钮

1.在index.html引入cordova.js

<script src="./cordova.js" type="text/javascript" charset="utf-8"></script>
//无需手动添加cordova.js Cordova打包后会自动生成

2.在mounted中添加监听（如果要实现某些页面使用返回，用$route.path获取路径再做判断处理）

let _vue = this;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
//navigator.splashscreen.hide();
document.addEventListener("backbutton", onBackKeyDown, false);
}
function onBackKeyDown() {
_vue.$toast('再按一次返回键退出');  //这里的toast使用的是vant组件的，自行修改
document.removeEventListener("backbutton", onBackKeyDown, false); // 注销返回键
document.addEventListener("backbutton", exitApp, false); //绑定退出事件
// 3秒后重新注册
let intervalID = window.setInterval(function() {
window.clearInterval(intervalID);
document.removeEventListener("backbutton", exitApp, false); // 注销返回键
document.addEventListener("backbutton", onBackKeyDown, false); // 返回键
}, 3000);
}
function exitApp() {
navigator.app.exitApp();
}

二. 沉浸式状态栏

1.安装状态栏插件

cordova plugin add cordova-plugin-statusbar

2.打开Cordova项目文件夹下面的

/platforms/android/app/src/main/java/org/apache/cordova/statusbar

修改StatusBar.java文件的run方法为：

run{
  Window window = cordova.getActivity().getWindow();
//实现沉浸式状态栏效果 start
  window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
  window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
  window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
  window.setStatusBarColor(Color.TRANSPARENT);
  window.setNavigationBarColor(Color.TRANSPARENT);
// end
  window.clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
}

cordova build一下项目，发到手机上安装看效果

结束

至此，已经完成，上个效果图 要注意的是 做沉浸式，要给页面顶部留个25px的padding。若有疑问，不妨留言

15691406-c83a3a05dd342f03.png