zoukankan      html  css  js  c++  java
  • cordova+vue打包webapp

    使用cordova+vue打包webapp,可以快速给网页套上一个android和ios壳子,完成一个app的开发。

    1. 环境准备。

    (1)node.js

    (2)java环境,jdk安装和环境变量配置。
     本次安装版本:jdk1.8.0_201
    (3)android SDK
      下载地址:http://tools.android-studio.org/index.php/

    步骤:

      1.将文件解压到 D:\Android\Android-SDK;

      2.添加系统环境变量。ANDROID_HOME:D:\Android\Android-SDK,path增加%ANDROID_HOME%\tools\bin  和  %ANDROID_HOME%\tools。

      3.dos进入D:\Android\Android-SDK目录,安装android api 版本。

      sdkmanager "platform-tools" "platforms;android-28"
    sdkmanager "build-tools;28.0.0"
    (4)安装gradle
     下载地址: http://services.gradle.org/distributions/


    步骤:
      1.将文件解压到D:\Gradle\gradle-5.3.1;
      2.添加环境变量 GRADLE_HOME:D:\Gradle\gradle-5.3.1,path增加 D:\Gradle\gradle-5.3.1\bin。
      3.到站点任意目录运行 gradle -v,检查gradle是否安装成功。
    (5)安装cordova。
    运行命令:npm install -g cordova,通过输入cordova -v查看版本号,检验是否安装成功.

    2.打包。
    (1)创建cordova项目.
      1.dos进入对应目录,如(D:\Cordova),运行cordova create cordova-test,注意路径中不能有中文字符。
      运行生成目录:
      
      2.添加平台,按需安装。
      cordova platform add android --save    安卓平台
       cordova platform add ios --save    ios平台
      
      cordova platform add browser --save 浏览器
      3. 运行命令。
      cordova build android(ios) 生成打包文件,文件路径:platforms → android → app → build → outputs → apk → debug
      cordova run android(
    browser, ios) 调试运行
    (2)配置vue项目。
      1.复制vue项目文件到
    D:\Cordova下。
      2.修改vue配置文件。
       first: 文件路径 config\index.js  
        

       修改build 下配置。
      
         
    index: path.resolve(__dirname, '../../cordova-test/www/index.html'),
        // Paths
        assetsRoot: path.resolve(__dirname, '../../cordova-test/www'),
        assetsSubDirectory: 'static',
        assetsPublicPath: '',
    View Code

        second: 修改build/utils.js.

     if (options.extract) {
          return ExtractTextPlugin.extract({
            use: loaders,
            //新增
            publicPath: '../',
            fallback: 'vue-style-loader'
          })
        } else {
          return ['vue-style-loader'].concat(loaders)
        }
    View Code

      3.打包。

      1. 打包vue。到D:\Cordova\vueProject,运行 npm run build,文件会出现在cordova项目的www文件夹下。

      2.生成apk文件。到D:\Cordova\cordova-test,运行 cordova build android。

      4.完成。

      在app上安装apk文件。



     


     
     

      
     
     
     
     
  • 相关阅读:
    LeetCode: Binary Search Tree Iterator 解题报告
    LeetCode: Search Insert Position 解题报告
    LeetCode: Search a 2D Matrix 解题报告
    LeetCode: Distinct Subsequences 解题报告
    LeetCode: Pascal's Triangle II 解题报告
    LeetCode: Pascal's Triangle 解题报告
    LeetCode: Valid Palindrome 解题报告
    LeetCode: Palindrome 回文相关题目
    K8S使用入门-创建第一个容器
    Prometheus监控实战day2——监控主机和容器
  • 原文地址:https://www.cnblogs.com/heshuaiblog/p/10694386.html
Copyright © 2011-2022 走看看