现在国内越来越多的开发者使用Vue开发混合app，但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app。
据我现在的了解打包Vue项目目前流行的就是使用weex和cordova。weex是阿里提供并且Vue的作者也极力推荐的，有兴趣的可以去学习使用一下。因为我本身是做angular+ionic的，所以比较青睐cordova，下面我就教大家怎么使用cordova打包Vue项目：
第一步：安装cordova
如果已经安装则直接跳过，否则执行以下命令：
npm install -g cordova
如果这个命令都不会运行，那我建议你不要继续往下看了。
第二步：新建cordova项目
执行命令
cordova create cordovaApp com.cordova.testapp
cd cordovaApp
cordova platform add android
到这里我们的cordova项目就创建好了。
第三步：修改vue项目
如果你没有vue项目的话，自行百度去新建一个vue项目吧。
首先修改vue项目的index.html
在head之间加入
<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">
这里注意加入<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:;">这个的时候可能导致页面样式改变，如果改变则不加，否则还是建议加上。这段主要是防止跨站脚本攻击。
然后引入cordova.js
<body>
<div id="app"></div>
<script type="text/javascript" src="cordova.js"></script>
<!-- built files will be auto injected -->
</body>
然后修改src中的main.js为以下代码
// 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
/* eslint-disable no-new */
document.addEventListener('deviceready', function() {
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})
window.navigator.splashscreen.hide()
}, false);
最后修改config文件夹中的index.js文件
修改build中的
assetsSubDirectory: 'static',
assetsPublicPath: '/',
为
assetsSubDirectory: '',
assetsPublicPath: '',
然后运行
npm run dev
看看是否能够运行起来，如果正常说明到这里是没有问题的（注意这里运行的时候需要将document.addEventListener注释，因为在浏览器环境下是找不到cordova.js的也就不能监听到deviceready的事件，打包在真机上才能实现监听）。
第四步：将vue文件放到cordova项目中并打包
先在vue项目中运行
npm run build
执行完成后会生成一个dist文件夹，找到这个文件夹将里面的所有文件复制到你的cordova项目的www文件夹下替换它原有的文件。
然后就可以执行
cordova build android
会生成一个可执行的apk文件，安装即可。
到这里就完成了我们vue项目的打包。
友情提示：
如果vue项目在运行npm run dev或者npm run build的时候遇到问题一般不是代码出错的话可以将node_modules文件夹删除使用npm install安装。
如果是因为eslint导致代码检查不通过的话，可以将Vue项目的build文件夹下的webpack.base.config文件中的rules
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
这段代码注释即可。
网友评论
Failed to load resource: net::ERR_FILE_NOT_FOUND app.8a4d91a3df93d6ff9e5b3d99a12fd759.css
应该是文件没找到，但是不知道该怎么办了
file:///js/11.xxxxx.js
事实的js文件是在android_asset/www/js下。
各位有解决吗？
You have been opted out of telemetry. To change this, run: cordova telemetry on.
ANDROID_HOME=E:\android\android-sdk-windows
JAVA_HOME=C:\Program Files\Java\jdk1.8.0_73
Error: Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio
怎样，怎么办？
命令出现这个，怎么回事，我是window电脑
Error: Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio
命令出现这个，怎么回事
ANDROID_HOME=/usr/local/android-sdk-macosx
JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_131.jdk/Contents/Home
Error: spawn EACCES
命令出现这个，怎么回事，我是window电脑
Error: Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio
ANDROID_HOME=/usr/local/android-sdk-macosx
JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_131.jdk/Contents/Home
Error: spawn EACCES
最后npm run dev这个文件报错404 怎么办
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
window.navigator.splashscreen.hide()
}, false);
你好，当我做到这一步的时候页面空白，不显示东西了，是怎么回事。谢谢。这个是在vue里面，卧槽，刚才发错地方了。现在更正一下。
是的，还得是苹果本
cordova.js这个js在哪
document.addEventListener('deviceready', function() {
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})
window.navigator.splashscreen.hide()
}, false);
我改成这样的vue项目npm run dev后变黑屏了，什么情况
创建cordova项目 这一步 报错了
cordova create cordovaApp com.cordova.testapp
F:\code2>cordova build android
(node:11636) UnhandledPromiseRejectionWarning: CordovaError: Current working directory is not a Cordova-based project.
at Object.cdProjectRoot (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cordova\node_modules\cordova-lib\src\cordova\util.js:170:15)
at C:\Users\Administrator\AppData\Roaming\npm\node_modules\cordova\node_modules\cordova-lib\src\cordova\build.js:27:39
at _fulfilled (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cordova\node_modules\cordova-lib\node_modules\q\q.js:787:54)
at self.promiseDispatch.done (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cordova\node_modules\cordova-lib\node_modules\q\q.js:816:30)
at Promise.promise.promiseDispatch (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cordova\node_modules\cordova-lib\node_modules\q\q.js:749:13)
at C:\Users\Administrator\AppData\Roaming\npm\node_modules\cordova\node_modules\cordova-lib\node_modules\q\q.js:810:14
at flush (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cordova\node_modules\cordova-lib\node_modules\q\q.js:108:17)
at _combinedTickCallback (internal/process/next_tick.js:131:7)
at process._tickCallback (internal/process/next_tick.js:180:9)
at Function.Module.runMain (module.js:695:11)
(node:11636) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a p
romise which was not handled with .catch(). (rejection id: 1)
(node:11636) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a no
n-zero exit code.