09月28, 2018

cordova打包vue项目流程

最近在学习vue,使用vue-cli3+vue-router+vuex+mint-ui做了一个美团demo,想打包app看看效果,于是记录一下打包流程。

配置打包环境andrioid sdk

配置Andriod环境变量前提是要先安装好JAVA环境(我早先已装好环境,就不赘述了)。 1、下载Android SDK,点击安装,直接默认路径即可! 下载地址:http://developer.android.com/sdk/index.html

2、默认路径安装后,安装完成,开始配置环境变量。

3、打开计算机属性——高级系统设置——环境变量(如上文)

4、新建一个环境变量,变量名:ANDROID_HOME,变量值:D:\adt-bundle-windows-x86_64-20140702\sdk(以你安装目录为准,确认里面有tools和add-ons等多个文件夹),点击确认。

5、在用户变量PATH后面加上变量值;%ANDROID_HOME%\platform-tools;点击确认即可。 在系统变量path中添加;D:\adt-bundle-windows-x86_64-20140702\sdk\tools

6、Android SDK配置完成,接下来验证配置是否成功。

7、点击运行——输入cmd——回车——输入adb——回车,如果出现一堆英文,如下图所示,即表示配置成功,在输入Android,启动Android SDK Manager。

如果Android sdk环境变量配置成功之后,还出现这个问题的话
1.检查cordova 下的Android 版本,运行命令

cordova platform version android

2.然后显示5.0的话,之后你必须更新Android 版本,通过输入命令

cordova platform update android

修改vue项目

  1. 首先修改vue项目的index.html

    <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">
    

    这里注意加入<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:;">这个的时候可能导致页面样式改变,如果改变则不加,否则还是建议加上。这段主要是防止跨站脚本攻击。

  2. 然后引入cordova.js在index.html
    注意cordova.js不需要引入
    <body>
     <div id="app"></div>
     <script type="text/javascript" src="cordova.js"></script>
     <!-- built files will be auto injected -->
    </body
    
  3. 然后修改src中的main.js为以下代码

    document.addEventListener('deviceready', function() {
     new Vue({
         router,
         template: '<App/>',
         render: (h) => h(App), 
         components: { App }
     }).$mount('#app');
     window.navigator.splashscreen.hide();
    });
    
  4. 修改vue.config.js

    module.exports = {
     baseUrl: './'
    };
    

    看看是否能够运行起来,如果正常说明到这里是没有问题的(注意这里运行的时候需要将document.addEventListener注释,因为在浏览器环境下是找不到cordova.js的也就不能监听到deviceready的事件,打包在真机上才能实现监听)。

    cordova打包

  5. 安装cordova环境

    npm install -g cordova
    
  6. 创建cordova打包工程

    cordova create cordovaApp com.cordova.testapp
    cd cordovaApp
    cordova platform add android
    
  7. 将生成的vue-cli生成的dist目录里的文件拷贝到打包工程的www目录下替换
  8. 打包
    cordova build android
    
    这时候如果遇到如下报错: Error:Android SDK not found. Make aure that it is installed. If it is not at the default location,set the ANDROID_HOME environment variable.
    解决方案:tools_r25.2.3-windows.zip
    原因:主要是目前下载的SDK tools文件夹目录和文件的结构和6.0以下引用的目录结构不同,需要更新到6.0以下
  9. 然后就慢慢等吧,第一次打包的时候下了一堆资源,等了好长时间才打包出来,文件在platforms\android\build\outputs\apk文件夹下

本文链接:http://zzl.bzpwhite.cn/post/cordovaVue.html

-- EOF --

Comments