共计 1433 个字符，预计需要花费 4 分钟才能阅读完成。
现在国内越来越多的开发者使用 Vue 开发混合 app，但是当大家开发完成过后才发现不知道该怎么将 Vue 项目打包成 app。现在的打包 Vue 项目目前流行的就是使用 weex 和 cordova。weex 是阿里提供并且 Vue 的作者也极力推荐的，有兴趣的可以去学习使用一下。下面说说怎么使用 cordova 打包 Vue 项目：
第一步：安装 cordova, 创建好 cordova 项目。
第二步：修改 vue 项目
首先修改 vue 项目的 index.html，引入 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
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: ”,
第三步：运行
看看是否能够运行起来，如果正常说明到这里是没有问题的（注意这里运行的时候需要将 document.addEventListener 注释，因为在浏览器环境下是找不到 cordova.js 的也就不能监听到 deviceready 的事件，打包在真机上才能实现监听）。
第四步：将 vue 打包好的文件放到 cordova 项目中并打包 cordova run android, 会生成一个可执行的 apk 文件，也可以直接在真机上运行。安装即可。
友情提示：
如果 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’)
}
},
这段代码注释即可。
