狗年大吉，恭喜发财。
新年之后第一次写文章，将年前未完成的系列最后一篇结束掉。
一些想说的话：
不论是Angular还是Vue，或者Jquery甚至原生的html，都可以通过Cordova的封装作为webview以原生应用的方式安装到你的手机上呈现。
我们这个系列教程的目的就是想在Vue里可以使用Ionic这个漂亮的框架，不过你也可以使用其它的UI框架，比如：VUX，Onsen-UI，WEEK，Vue-material等等实现混合应用，甚至Week也像Ionic那样帮你封装好了Cordova命令。
如果我们想使用Angular，也不一定非要使用Ionic，我们也可以使用Angular-material等等其它任何你喜欢的UI框架。
当初我们从Ionic接触了混合开发，就认为它是最好的混合开发框架，其实世界很大，而我们知道的太少。
这一切的一起，都要感谢Cordova。
然而在刚刚过去的2月27号，Ionic官方正式宣布Capacitor测试版本发布，这意味着它们会在未来的Ionic版本逐渐摆脱Cordova，主推自己的开源Capacitor框架，暂时我们可以将Capacitor理解为类似于Cordova的东西，据Ionic的官方博客的说法，他们认为这个会比Cordova性能更好，更简单。
不得不承认Cordova已经在混合应用开发领域独占鳌头许多年，虽然现在还不知道Ionic的Capacitor会不会影响Cordova的市场地位，但是挑战的号角已经发出，让我们期待Ionic在混合应用领域带来的变化吧。
开始：
在之前的教程里，我们已经掌握了基于Vue框架构建Ionic应用的大部分知识。剩下的一大步就是使我们的Ionic/Vue应用在iOS和Android手机运行。在Ionic/Angular环境下实现这个很简单，因为Ionic CLI已经帮我们封装好了Cordova命令。不过当我们使用Ionic/Vue的时候我们需要自己多做一些配置工作。
在本篇文章，我们会谈谈如何使用Cordova将我们的Ionic/Vue代码封装为原生应用。我们使用的方法可以方便的将使用webpack和Vue CLI构建的Vue项目整合为Cordova应用。
注意：我们不会再本文谈论我们之前已经讲过的如何使用Vue构建Ionic应用。我们只是对一个普通的Vue CLI项目使用Cordova进行设置。如果你想了解如何将Ionic添加到这个Vue项目，你应该回到教程开始的地方。
1.添加Cordova到一个Vue项目
我们要做的第一件事就是使Cordova和Vue在同一个项目工作。幸运的是，这非常简单。但是将现有的Vue项目集成到一个新的Cordova项目比其他方法都要更加简单。
首先我们要创建一个新的Cordova项目。为了做到这个我们需要在电脑安装Cordova。也许你已经安装了，不过如果没有的话，你需要先运行下面的命令来安装Cordova CLI:
npm install -g cordova
一旦你安装好了Cordova，你可以用下面的命令创建一个新的Cordova项目：
cordova create my-project-name
如果你有Ionic/Angular背景，那这个Cordova创建的项目看起来应该很眼熟（它有你在Ionic/Angular应用里看到的大部分文件/文件夹）。
我们要做的就是将Vue项目最终生成的文件(html,css,assets等)放到www文件夹下面。这里是Cordova会封装为原生应用的东西。一旦我们有了这些文件，我们就可以使用Cordova构建命令。
我们可以将Vue应用独立开来，手动的拷贝这些文件到我们Cordova项目的www文件夹下面。不过这有点麻烦耗时。我们打算在Cordova项目里直接添加Vue以便在同一个项目文件夹下面做开发。
在Cordova项目里添加Vue，你只需要在Cordova项目里面运行以下命令：
vue init webpack
如果在这个命令行下不提供projec name（以往都会提供），它会在你目前所在的文件目录下创建项目。否则，它会在Cordova项目里面创建一个新的文件夹，而我们不想这样。
一旦你完成了上面的命令，你可以运行下面的命令来检查你的Vue应用可以还构建和运行：
npm run dev
2.准备应用
就像我们在上面说的，Cordova会封装所有www文件夹下的文件为一个原生应用。不幸的是，默认情况下，如果我们运行：
npm run build
编译的文件都会自动放在dist文件夹下。这不是什么大问题，不过我们需要做一些改动，以便这些编译后的东西可以自动放到www文件夹下。
修改config/index.js文件下的build属性：
build: {
// Template for index.html
index: path.resolve(__dirname, '../www/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../www'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
我们将dist改为了www，而且还有另一个重要的改动：
assetsPublicPath改为了./ 如果没有这个改动，file://协议不能工作，你的文件也不能使用Cordova加载。
既然www文件夹成为了默认的文件，你应该在第一次build之前删除原来的www文件夹。
我们也要在index.html做些改动。
在index.html添加cordova.js:
<script type="text/javascript" src="cordova.js"></script>
在index.html添加以下标签：
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <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="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no">
如果你打算使用git，你也要更新你的.gitinore文件：
.DS_Store node_modules/ /dist/ npm-debug.log* yarn-debug.log* yarn-error.log* # Editor directories and files .idea .vscode *.suo *.ntvs* *.njsproj *.sln *~ *.sw[mnpcod] *.log *.tmp *.tmp.* log.txt *.sublime-project *.sublime-workspace .vscode/ .idea/ .sass-cache/ .tmp/ .versions/ coverage/ tmp/ temp/ hooks/ platforms/ plugins/ plugins/android.json plugins/ios.json www/ $RECYCLE.BIN/ Thumbs.db UserInterfaceState.xcuserstate
这就是我们要做的所有配置，现在我们可以使用Cordova构建应用。
3.编译iOS和Android
按照以前熟悉的配方，我们是这样做的：
cordova platform add ios --save
cordova platform add android --save
如果你想使用Cordova插件，你可以这样安装：
cordova plugin add plugin-goes-here
构建你的Vue应用：
npm run build
然后运行到手机上：
cordova run ios --device
cordova run android --device
这些仍然有很多不必要的工作，所以我们打算设置我们自己的命令。
修改package.json:
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"build android": "npm run build && cordova build android",
"build ios": "npm run build && cordova build ios",
"android": "npm run build && cordova run android --device",
"ios": "npm run build && cordova run ios --device"
},
我们设置了四个命令，可以像下面这样使用：
npm run build android //Builds the VueJS code and builds the Android application npm run build ios //Builds the VueJS code and builds the iOS application npm run ios //Builds the VueJS code and runs the iOS application npm run android //Builds the VueJS code and runs the Android application
总结：
为了配置Cordova和Ionic/VueJS应用，我们多做了一些事情。不过一旦你像上面这样设置好就和使用Ionic／Angular来构建和部署应用一样简单了。