如今国内愈来愈多的开发者使用Vue开发混合app，可是当你们开发完成事后才发现不知道该怎么将Vue项目打包成app。
如今的打包Vue项目目前流行的就是使用weex和cordova。weex是阿里提供而且Vue的做者也极力推荐的，有兴趣的能够去学习使用一下。下面说说怎么使用cordova打包Vue项目：javascript
首先修改vue项目的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>
而后修改src中的main.js为如下代码vue
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
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文件，修改build中的java
assetsSubDirectory: 'static', assetsPublicPath: '/',
为node
assetsSubDirectory: '', assetsPublicPath: '',
看看是否可以运行起来，若是正常说明到这里是没有问题的（注意这里运行的时候须要将document.addEventListener注释，
由于在浏览器环境下是找不到cordova.js的也就不能监听到deviceready的事件，打包在真机上才能实现监听）。android
若是vue项目在运行npm run dev或者npm run build的时候遇到问题通常不是代码出错的话能够将node_modules文件夹删除使用npm install安装。
若是是由于eslint致使代码检查不经过的话，能够将Vue项目的build文件夹下的webpack.base.config文件中的ruleswebpack
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
这段代码注释便可。web