node+cordova+vue环境搭建

1. 安装 cordova 

这一步的前提是已经完成安装node和npm,如果没有安装的话，请先完成node和npm的安装。

(1) node安装：直接进入官网 https://nodejs.org/en/download/ 下载最新版本安装。安装之后在命令行中使用”node -v” 检查安装是否成功。
(2) npm安装：由于新版的nodejs已经集成了npm，所以node安装时npm也一并安装好了。同样可以通过输入 “npm -v” 来测试是否成功安装。

下载或者更新 SDK 如果不用代理，有可能一天都更新不完， Vue 也一样。设置代理：

        npm install -g cnpm --registry=https://registry.npm.taobao.org

        YARN 安装：

        在 npm 安装成功之后，直接在命令窗口中使用命令：npm i yarn -g ，安装yarn,

        在命令窗口使用测试命令：        yarn -v

(3) cordova安装：

使用命令：npm install -g cordova 来全局安装cordova；

检查是否安装成功：cordova -v

(4) gradle安装 （cordova 编辑项目时需要gradle）：

        1）去Gradle官网：https://gradle.org/install

        2）下载Gradle:https://gradle.org/releases，下载最新版本；

        3）解压，放置的位置自己定；

        4）配置环境变量：系统变量--Path--编辑 ，添加 ：gradle目录/bin 到 path

(5) vue安装（VUE2.0版本）

        全局安装：

        npm install -g vue
        npm install -g vue-cli

(6) 配置环境变量

        1) JDK：配置JAVA_HOME，如：C:\Program Files\Java\jdk1.8.0_231

        2) ANDROID_HOME：D:\daheng\androistudio_sdk

        3) ANDROID_SDK_ROOT：D:\daheng\androistudio_sdk

2. 新建 cordova 项目

   使用cd到我们要建项目的文件夹路径：如：cd cordovawork

（1）命令：cordova create myApp1 org.apache.cordova.myApp myApp2

        注意：创建的项目在指令执行的目录下。

        切换到 cordova 项目 myApp1 目录中：cd myApp1

        其中：
        myApp1：cordova目录名
        org.apache.cordova.myApp： 包名
        myApp2： 项目名（在config.xml中查看）

        生成的cordova文件中
        config.xml -包含应用相关信息，使用到的插件以及面向的平台
        platforms – 包含应用运行平台如 Android 和 iOS 上对应的 Cordova 库
        plugins – 包含应用所需插件的 Cordova 库，使得应用能够访问例如照相机和电池状态相关的                          事项。
        www – 包含应用源代码，例如 HTML, JavaScript 和 CSS 文件
        hooks – 包含为个性化应用编译系统所需的脚本

 （2）生成Android平台的cordova库（需要在(1)中创建的cordova项目下执行以下命令）

        命令：cordova platform add android

        这时platforms文件夹中会生成一个android文件夹。到这里，cordova项目就已经建好了。

4. 新建vue项目

    使用cd到我们要建项目的文件夹路径：如：cd cordovawork\cordovaApp

 （cordovaApp 是 cordova项目的项目根目录，vue项目在其下创建）

  （1）命令：vue init webpack MyApp

        注意：创建的项目在指令执行的目录下。且建议在 cordova 项目文件夹下创建，如：myApp1

   （2）修改配置文件

        修改Vue项目config/index.js文件       

        build: {
            // Template for index.html
            index: path.resolve(__dirname, 'D:/cordova/testApp1/www/index.html'),

                    // 值设置为cordova 项目下www的index.html

            // Paths
            assetsRoot: path.resolve(__dirname, 'D:/cordova/testApp1/www'),

                    // 路径值设置为 cordova 项目下www 
            assetsSubDirectory: 'static',
            assetsPublicPath: '', // 原来为'/'，设置为''

                .........

        }

   （3）编译vue项目

        在vue项目根目录执行命令：npm run build

        即可编译vue项目自动到cordova主目录下的www文件夹中。

5. 调试打包apk软件

    （1）调试打包软件之前，首先检查androidsdk是否正确安装，执行命令：

                cordova requirements

                即可看到当前环境中sdk安装情况。显示如下即表示环境正确安装。（只需确认正确

                 安装即可，不需每次都去检查）

    （2）在cordova主目录（cordova项目主目录）

                1）联调命令：cordova run android

                        来联调android软件（需连接真机或者模拟器），即可在真机上运行。

                2）打包命令：cordova build android

                        来打包成apk软件                 （…/cordovaApp/platforms/android/app/build/outputs/apk/debug/app-debug.apk）。

                cordova install android //将编译好的应用程序安装到模拟器上。
                cordova emulate android //在模拟器上运行（前提是创建好AVD）
                cordova serve android //在浏览器运行
                cordova build android //打包cordova项目到android平台。
                cordova run android //通过USB直接安装到真机（该语句已经包括了build命令）
————————————————
版权声明：本文为CSDN博主「。度」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_33238562/article/details/102797724

      （3）APK签名

                APK都必须经过数字签名后才能安装到设备上，签名需要对应的证书（keystore），大部分情况下 APK 都采用的自签名证书，就是自己生成证书然后给应用签名。数字签名证书是给APK打包所必需的文件，所以我们先要把数字签名证书生成。

         创建数字签名证书命令：

          keytool -genkey -v -keystore D:\mytest.keystore -alias mytest -keyalg RSA -validity 20000

                说明：

                -keystore D:/mytest.keystore表示生成的证书及其存放路径，如果直接写文件名则默认                                            生成在用户当前目录下；
　　        -alias mytest 表示证书的别名是mytest,不写这一项的话证书名字默认是mykey；
　　        -keyalg RSA 表示采用的RSA算法；
　　        -validity 20000表示证书的有效期是20000天。

        根据指令输入密钥库口令，是不可见的。依次输入下面的问题。最后到【否】那里时输入y
再输入密钥口令（可以与密钥库口令相同），如果相同，直接回车，记住这两个口令，后面签名会使用到。这时便会生成一个文件mytest.keystore，就是我们需要的签名文件。

      （4）打包APK

                生成带签名的apk有两种方式，一种先生成未签名debug版本，再加上数字签名证书然后             生成带签名的APK。另外一种就是直接一条命令生成带签名的APK。

                1) 先生成未签名的debug版本的apk

                        命令：cordova build android --release

                        就会生成一个app-release-unsigned.apk。把数字签名放到生成的未签名的apk所在                   的目录下，输入以下命令：

                        jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore                                         mytest.keystore app-release-unsigned.apk mytest

                        这时的apk就会是一个已经签名的apk了，修改一下名字即可直接放到设备上安装。

                2）直接生成带签名的apk

                        有了数字签名之后,数字签名需要放在cordova项目根目录下或者可以修改下面指令                    的keystore里的路径可以直接在cordova build中指定所有参数来快速打包，这会直接生                    成一个android-release.apk(已经是带签名的了)

                        命令：

                        cordova build android --release --keystore="mytest.keystore" --alias=mytest --                                storePassword=testing --password=testing1

                        说明：

                        keystore 后面是数字签名证书， –alias 后面是别名 storePassword 后面是密钥库                             口令 password 后面是密钥口令。

                        注意：命令中口令要替换成自己的，就是生成签名是需要记住的那两个口令。

                3）封装配置参数打包

                        但每次打包输入命令行参数是很重复的，Cordova 允许我们建立一个 build.json 配                    置文件来简化操作。在cordova根目录新建文本文档，改名为build.json。

                         build.json 文件内容如下：

                         {
　　                        ”android”: {
　　　　                        ”release”: {
　　　　　　                        ”keystore”: “mytest.keystore”,
　　　　　　                        ”alias”: “mytest”,
　　　　　　                        ”storePassword”: “testing”,
　　　　　　                        ”password”: “testing2”
　　　　　　                        }　　
　　　　                        }
　　                        }

                        直接使用命令：cordova build –release 就可以生成带签名的apk了。

                        注意：cordova build后面没有android

6. cordova项目导入到android studio中

android studio 导入 cordova项目：file --> new... --> Import Project ,选择 ***/platforms\android

   (1) 修改配置文件 platforms\android\build.gradle

buildscript {
    ext.kotlin_version = '1.3.50'
    apply from: 'repositories.gradle'
    repositories repos

    dependencies {
        classpath 'com.android.tools.build:gradle:3.6.0'
        // classpath 'com.android.tools.build:gradle:4.0.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

将红色背景部分参数改为本地android studio 使用的gradle（其它使用android创建的项目）

   （2）修改配置文件 platforms\android\gradle\wrapper\gradle-wrapper.properties

        distributionBase=GRADLE_USER_HOME
        distributionPath=wrapper/dists
        #distributionUrl=https://services.gradle.org/distributions/gradle-6.5-all.zip
        distributionUrl=https\://services.gradle.org/distributions/gradle-5.6.4-all.zip
        zipStoreBase=GRADLE_USER_HOME
        zipStorePath=wrapper/dists

        将红色背景部分参数改为本地android studio 使用的gradle（其它使用android创建的项目）

7.  cordova使用android studio打包

 （1） 在vue项目根目录先执行安装依赖包命令npm install，再执行打包命令：npm run build

 （2）将vue项目根目录下dist目录下的所有文件copy到 cordava项目根目录下www目录中（www目录中的文件可先清空）

  （3）构建APP即可：在 cordova项目根目录下，执行命令：cordova build android即可构建app             （提示：直接使用android studio安装APP时，也需要先拷贝dist目录下文件到www目录中，                         然后构建，再安装；否则，APP更新的内容不会加载）

    安卓9.0以上需配置以下信息：

    1. 在AndroidMainfest.xml中配置android:networkSecurityConfig="@xml/network_security_config"

2. 打开res/xml,新建 network_security_config.xml 配置如下信息：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
     <base-config cleartextTrafficPermitted="true" />
</network-security-config>

3、在AndroidMainfest.xml中 

<application android:hardwareAccelerated="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:supportsRtl="true" android:name="org.dh.cordova.base.BaseApplication" android:networkSecurityConfig="@xml/network_security_config" android:theme="@style/AppTheme">

中添加 android:theme="@style/AppTheme" ，来支持自定义Activity（主Activity 可不使用默认的MainActivity）

4、在AndroidMainfest.xml中

<application android:hardwareAccelerated="true" android:icon="${app_icon}" android:label="${app_name}" android:name="org.dh.cordova.base.BaseApplication" android:networkSecurityConfig="@xml/network_security_config" android:requestLegacyExternalStorage="true" android:supportsRtl="true" android:theme="@style/AppTheme">

中 添加 android:name="org.dh.cordova.base.BaseApplication" 上下文，后续用到上下文 Context 时，可直接使用 BaseApplication.getContext()

5. 完成以上配置之后，再次执行命令cordova build android，此时生成的apk就可以在安卓9.0以上版本中使用