• Cordova打包vue项目(Android)


    准备工作:

    安装好必要环境: vue-cli,webpack,node.js,android环境 (http://cordova.axuer.com/docs/zh-cn/latest/guide/platforms/android/index.html);

    个人觉得,android环境是最麻烦的,只要配置好,后面的都比较简单。

    开始:

    第一步:安装cordova

    如果已经安装则直接跳过,否则执行以下命令:

    npm install -g cordova

    第二步:新建cordova项目

    分别执行3个命令

    cordova create cordovaApp com.cordova.testapp
    cd cordovaApp
    cordova platform add android

    其中:

    • cordovaApp:  cordova目录名
    • com.cordova.testapp:  包名

    执行完这3个命令之后,cordova项目就建立好了。

     

    第三步:修改vue项目

    本文章不提供vue项目

    1.首先修改vue项目的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">

     

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

    在body之间加入引入cordova.js

    
    
    <body>
        <div id="app"></div>
        <script type="text/javascript" src="cordova.js"></script>
        <!-- built files will be auto injected -->
    </body>
    
    

     

    2.修改config文件夹中的index.js文件

    修改build中的

    
    
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',

    
    
       assetsSubDirectory: '',
       assetsPublicPath: '',
    
    

     

    3.在main.js里面添加(省略这步骤,打包后可能会导致出现空白页)

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

    当然,vue-cordova需要在vue项目中引入,在vue项目终端执行

    npm install vue-cordova --save

    测试:

    然后在vue项目终端运行

    npm run dev

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

    第四步:将vue文件放到cordova项目中并打包(成功后修改,只需反复该步骤即可)

    1.先在vue项目中运行

    npm run build

    执行完成后会生成一个dist文件夹,找到这个文件夹将里面的所有文件复制到你的cordova项目的www文件夹下替换它原有的文件。

    2.然后在cordova项目终端执行

    cordova build android

    会生成一个可执行的apk文件(cordova项目文件platformsandroidappuildoutputsapkdebugapp-debug.apk),拷贝到安卓手机安装即可。

    为科技世界而奋斗的小小程序员
  • 相关阅读:
    使用非root用户在RedHat 4下安装XHProf
    使用ClippingNode对精灵进行遮罩处理
    令Code::Blocks支持C++11特性
    解决cocos2dx在VS2012中文版环境下不支持中文的问题
    bzoj 1045[HAOI2008] 糖果传递
    bzoj 1070[SCOI2007]修车
    bzoj [ZJOI2010]网络扩容
    bzoj 1089[SCOI2003]严格n元树
    bzoj 4566[Haoi2016]找相同字符
    bzoj 1085[SCOI2005]骑士精神
  • 原文地址:https://www.cnblogs.com/jeremy5810/p/8467258.html
Copyright © 2020-2023  润新知