用Cordova将vue项目打包成app

1.配置安卓环境

(1)下载JDK和JRE,安装(通常JDK会集成JRE,所以只需安装JDK就好)JDK一定要是 8 版本(JDK1.8),Down了个10版本的差点配到吐也没成功,这是个惊天神坑

(2)下载Android  SDK,双击安装,复制下安装目录

(3)配饰环境变量:系统 => 高级系统设置 => 环境变量 =>系统变量 => 新建

新建一个ANDROID_HOME,值是sdk安装路径

新建一个JAVA_HOME,值是JDK安装路径

新建一个CLASSPATH,值是   .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;   (最前面有个点)

找到PATH,点击编辑,添加SDK目录下的platform_tools和tools路径,再添加一个JDK下的bin路径

 

 

2.构建VUE项目

使用vue-cli正常构建,撸代码

3.使用Cordova搭建打包环境

 npm install -g cordova --registry=https://registry.npm.taobao.org    (安装cordova,这里不要用npm或者cnpm  install  cordova  -g,会出错)

cordova creat cordovaApp com.cordova.testapp               (创建cordova项目,cordova create 项目名  com.公司名.项目名  类名)

cd cordovaApp

cordova platform add android         (添加安卓平台,注:很多插件例如摄像头插件之类的要在安卓6.3.0之后才好使,尽量安装android7.0平台)

4.修改vue项目

(1)在index.html的head中加入

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

<meta name="format-detection" content="telephone=no">

<meta name="msapplication-tap-highlight" content="no">

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

第一句可以不用加,加上可以防止跨站脚本攻击,但也有可能导致页面乱套

 

然后引入cordova.js,并添加一个监听设备的函数

<body>

    <div id="app"></div>

     <script type="text/javascript" src="cordova.js"></script>

    <script>

        document.addEventListener('deviceready', function() {   }, false);

    </script>

</body>

 

最后修改config文件夹下的index.js

修改build中的

assetsSubDirectory: 'Static',

assetsPublicPath: '/',

assetsSubDirectory: ' ',

assetsPublicPath: ' ',

或者改成

assetsSubDirectory: ' ',

assetsPublicPath: ' ./',

 

然后运行

npm run dev

注释掉main.js的document.addEventListener('deviceready', function() { }),因为这个在浏览器里不识别,在APP里才可以此时如果能正常跑起来,那就没问题了。(会报一个缺少左尖角的错,不用管)

 

5.将VUE项目打包

npm run biuld

将生成的dist文件夹下的文件全部复制,替换掉刚刚新建的cordova项目里面的www文件夹内的东西,然后在终端进入cordova项目文件夹,运行打包命令

cordova  build  android

会生成一个apk文件,然后放到手机里,安装即可

 

6.注意事项

(1)配置安卓环境非常麻烦,而且全他妈是坑,谨慎,心态放平,版本压低

(2)首次打包时间会非常长,我花了25分钟,因为npm要去下载gradle,不太大,但是不科学上网的话会奥比慢

(3)如果安卓了安卓SDK但是打包的时候一直报 Android SDK not found 的错,去下载一个低版本的tool,解压之后替换掉SDK安装目录下的tool文件夹,下载地址:https://dl.google.com/android/repository/tools_r25.2.3-windows.zip

(4)JDK为版本最好为 8(即1.8.0),然后等cordova build android时,报了哪个SDK的版本,就去Android  Studio里下载对应的SDK Platform。

例如我的报的是22:

那么打开Android Studio,右下角的configure => SDK Manager

勾选右下角Show Package Details => 找到你去要的SDK Platform版本,勾选 => OK

再回到终端里,cordova  build  android,就可以了

 

另:真机调试请看https://blog.csdn.net/bing103425/article/details/81362113

 

 

 

不要觉得年纪轻轻就到了低谷,人生还有很大的下降空间。