使用Cordova+vue-cli3搭建混合app项目

1.前言
这篇文章主要是简单介绍如何使用Cordova和vue-cli3搭建混合app项目，以及记录一下在搭建过程中遇到的一些问题。
2.创建Cordova项目
先安装node（https://nodejs.org/en/），然后通过npm install cordova安装Cordova，安装完成后可通过Cordova –v查看cordova的版本号

通过Cordova create MyApp创建项目

完成后可看见项目结构为：

其中www文件夹下面放着页面的基础代码。
进入MyApp目录，通过命令cordova platform add android创建Android平台，cordova platform add ios创建iOS平台和cordova platform add browser创建浏览器平台。

重点：在安装的过程中可能会出现下载报错的情况，
解决方式：使用cordova platform add android –nofetch代替cordova platform add android，其他的也相应改变。
创建完成后，可以看到platforms文件夹下面多了三个文件夹，browser，android，ios。这是cordova用来编译的工具。

通过命令cordova run browser在浏览器上预览项目效果，


如果想要打包安卓应用包可使用cordova build android，同样打包成iOS应用包可使用cordova build ios。这样一个基础cordova项目就完成了。
3.搭建vue项目
搭建vue项目使用vue-cli3(https://cli.vuejs.org/zh/guide/)脚手架，需要先使用npm install -g @vue/cli安装

进入MyApp目录下并使用vue create vueProject创建
项目配置可以参考(https://cli.vuejs.org/zh/guide/)，安装成功后，项目结构为如下：

红色部分为vue项目。我们知道cordova项目的页面基础文件在www文件夹下面，接下来要做的就是将vue项目编译后的文件放到www文件夹下面去。
在vue-project目录下创建vue.config.js文件（该文件是webpack的配置文件，具体配置方法可以参考https://cli.vuejs.org/zh/guide/webpack.html）。
重点：vue.config.js文件内容如下，将vue的打包文件放到cordova项目中的www文件下面。

进入vue-project目录下，使用npm run build打包vue项目，完成后可以在www文件夹下找到打包后的文件

进入MyApp目录下，再次使用命令cordova run browser在浏览器下预览项目，

到这里，使用cordova和vue搭建app项目就基本完成了，想在Android或iOS系统上运行可使用cordova build android和cordova build ios打包后运行。