?現在國內越來越多的開發者使用Vue開發混合app，但是當大家開發完成過后才發現不知道該怎么將Vue項目打包成app。

據我現在的了解打包Vue項目目前流行的就是使用weex和cordova。weex是阿里提供并且Vue的作者也極力推薦的，有興趣的可以去學習使用一下。因為我本身是做angular+ionic的，所以比較青睞cordova，下面我就教大家怎么使用cordova打包Vue項目：

第一步：安裝cordova

如果已經安裝則直接跳過，否則執行以下命令：

npm install -g cordova

如果這個命令都不會運行，那我建議你不要繼續往下看了。

第二步：新建cordova項目

執行命令

cordovacreatecordovaAppcom.cordova.testappcdcordovaAppcordovaplatformaddandroid

到這里我們的cordova項目就創建好了。

第三步：修改vue項目

如果你沒有vue項目的話，自行百度去新建一個vue項目吧。

首先修改vue項目的index.html

在head之間加入

這里注意加入這個的時候可能導致頁面樣式改變，如果改變則不加，否則還是建議加上。這段主要是防止跨站腳本攻擊。

然后引入cordova.js

然后修改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.importVuefrom'vue'importAppfrom'./App'importrouterfrom'./router'Vue.config.productionTip =false/* eslint-disable no-new */document.addEventListener('deviceready',function(){newVue({el:'#app',? ? ? ? router,? ? ? ? store,template:'',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')? ? ? ? ? ? ? }? ? ? ? ? ? },

這段代碼注釋即可。