使用Cordova打包Vue项目的方法
在近些年来，混合开发App变得越来越流行，许多开发者选择使用Vue框架来开发混合App，但是当开发完成后，很多人不知道如何将Vue项目打包成App。目前流行的打包方法有weex和Cordova两种，今天我们将详细介绍使用Cordova打包Vue项目的方法。
安装Cordova
我们需要安装Cordova。使用npm安装Cordova的命令是`npm install -g cordova`。如果已经安装了Cordova，可以跳过这一步。
新建Cordova项目
接下来，我们需要新建一个Cordova项目。执行命令`cordova create cordovaApp com.cordova.testapp`，然后执行`cd cordovaApp`和`cordova platform add android`，这样我们的Cordova项目就创建好了。
修改Vue项目
如果您没有Vue项目，可以自行百度去新建一个Vue项目。下面我们将修改Vue项目的配置文件。在`index.html`文件中，我们需要添加以下代码：
```html
<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="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
```
这些代码是为了解决在移动设备上可能出现的样式问题。
然后，我们需要在`index.html`文件中引入cordova.js文件：
```html
<body>
<div id="app"></div>
<script type="text/javascript" src="cordova.js"></script>
<!-- built files will be auto injected -->
</body>
```
在`main.js`文件中，我们需要添加以下代码：
```javascript
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
document.addEventListener('deviceready', function() {
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})
window.navigator.splashscreen.hide()
}, false)
```
我们需要修改`config`文件夹中的`index.js`文件，将`assetsSubDirectory`和`assetsPublicPath`修改为以下代码：
```javascript
module.exports = {
// ...
build: {
assetsSubDirectory: 'static',
assetsPublicPath: '/',
// ...
}
}
```
这样，我们就完成了使用Cordova打包Vue项目的所有步骤。现在，您可以使用Cordova将Vue项目打包成一个移动App了。
