cordova+vue混合式开发App

Posted 2021-03-23 yabo055

        应要求第一次使用cordova打包了一下vue写的app项目，期间遇到了不少问题，整理一下流程并记录一下常见问题吧。
        cordova打包项目需要的环境配置啥的就不具体讲啦，百度一下很多教程~

1. 创建cordova项目并添加android平台
创建项目指令：cordova create hello com.example.hello helloworld

第一个hello是cordova自动生成的项目文件夹名称
第二个com.example.hello我一般填写公司的名称，比如：com.csdn.hello
第三个helloword是打包完成后app的名称。
        创建完cordova项目后我们需要通过指令进入cordova项目的路径下才可进行后续操作：
         进入项目目录指令：cd hello
        进入项目目录后，我们需要添加对应的平台，这里我们用的是Android平台
         添加平台指令：cordova platform add android

2. 打包vue项目
打包vue项目指令：npm run build
        首先打包好你的h5项目，我们公司是用vue框架写的项目，因此打包的时候遇到一个问题，即打包生成的静态页面打开为空白页，百度搜索之后发现是路径指向问题，只需要在vue.config.js文件中修改publicPath的值为“./”即可解决问题。

publicPath: ‘/‘, => publicPath: ‘./‘,
1
        这里有一种比较便捷的打包方式，即修改你的输出文件路径，将它指向你cordova项目中静态文件存放的地址。这样可以省去每次打包好vue项目后再复制粘贴到cordova项目中的麻烦。
具体修改outputDir值即可：

//原始值
outputDir: ‘dist‘,
//修改为 具体地址视开发情况而定
outputDir: ‘E:cordovademoplatformsandroidappsrcmainassetswww‘,

注意：每次打包前要清空cordova项目中对应目录下的静态文件！先清空，在打包！

        如果打包vue项目时没有修改outputDis路径，则将输出的dist文件下的内容，全部复制到E:cordovademoplatformsandroidappsrcmainassetswww路径下。注意不要随便删除跟插件有关的js文件，否则会造成打包后插件不生效的情况！

        上图中绿色线框选出的是cordova自动生成的插件相关文件，建议不要随便修改！红线框出的是复制进来的vue项目打包输出后的文件。

3. 安装所需的插件
安装插件指令：cordova plugin add cordova-plugin-XXX

具体插件名称看项目中用到了哪些，一般安装插件有三种方法：

cordova官方插件。比如 cordova plugin add cordova-plugin-camera
通过url安装。比如 cordova plugin add https://github.com/nordnet/cordova-hot-code-push.git
安装本地插件。比如 cordova plugin add E:cordovapluginscordova-hot-code-push-local-dev-addon

如果需要删除某些插件可以使用：cordova plugin remove XXXX
如果需要查看已安装的插件列表可以使用： cordova plugin list
4. 修改APP的名称和图标
具体开发时我们可能还需要重新修改APP的名称和图标：
修改名称
    找到helloplatformsandroidappsrcmain esvalues文件夹下的strings.xml文件，修改app_name值：
<?xml version=‘1.0‘ encoding=‘utf-8‘?>
<resources>
<string name="app_name">APP名称</string>
<string name="launcher_name">@string/app_name</string>
<string name="activity_name">@string/launcher_name</string>
</resources>

2.修改图标
        找到E:cordovademoplatformsandroidappsrcmain es目录

将上图红框文件夹中的图片替换为你所需要的图片，每个文件夹对应了不同尺寸的设备，具体对应关系自行百度。

注意修改放入的图片的文件名为ic_launcher_foreground.png!

5. 打包apk
打包APK指令：cordova build android
        除了使用指令以外，也可以在AndroidStudio中通过  Build->Build Bundle(s)/APK(s)->Build APK(s)  来输出apk文件。

一般输出的apk文件在
E:cordovademoplatformsandroidappuildoutputsapkdebug目录下，默认的文件名为app-debug.apk。
        当然在打包之前尽量现在虚拟机上运行一下程序看看是否有问题，若无问题再打包最好