用Cordova打包Vue項目的方法步驟

更新時間：2019年02月02日 09:13:08 作者：要學(xué)習(xí)資料找我

這篇文章主要介紹了用Cordova打包Vue項目的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

現(xiàn)在國內(nèi)越來越多的開發(fā)者使用Vue開發(fā)混合app，但是當(dāng)大家開發(fā)完成過后才發(fā)現(xiàn)不知道該怎么將Vue項目打包成app。

現(xiàn)在的打包Vue項目目前流行的就是使用weex和cordova。weex是阿里提供并且Vue的作者也極力推薦的，有興趣的可以去學(xué)習(xí)使用一下。下面說說怎么使用cordova打包Vue項目：

第一步：安裝cordova,創(chuàng)建好cordova項目。

第二步：修改vue項目

首先修改vue項目的index.html，引入cordova.js。這個引入在瀏覽器打開會報錯。要打包后運行在真機(jī)后方可看到效果

<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注釋，
因為在瀏覽器環(huán)境下是找不到cordova.js的也就不能監(jiān)聽到deviceready的事件，打包在真機(jī)上才能實現(xiàn)監(jiān)聽）。

第四步：將vue打包好的文件放到cordova項目中并打包cordova run android,會生成一個可執(zhí)行的apk文件，也可以直接在真機(jī)上運行。安裝即可。

友情提示：

如果vue項目在運行npm run dev或者npm run build的時候遇到問題一般不是代碼出錯的話可以將node_modules文件夾刪除使用npm install安裝。

如果是因為eslint導(dǎo)致代碼檢查不通過的話，可以將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')
   }
  },

這段代碼注釋即可。

PS：通過cordova將vue項目打包成app

一、創(chuàng)建一個cordova工程

cordova create cordovaVue

cd cordovaVue

config.xml -包含應(yīng)用相關(guān)信息，使用到的插件以及面向的平臺
platforms - 包含應(yīng)用運行平臺如 Android 和 iOS 上對應(yīng)的 Cordova 庫
plugins - 包含應(yīng)用所需插件的 Cordova 庫，使得應(yīng)用能夠訪問例如照相機(jī)和電池狀態(tài)相關(guān)的事項。
www - 包含應(yīng)用源代碼，例如 HTML, JavaScript 和 CSS 文件
hooks - 包含為個性化應(yīng)用編譯系統(tǒng)所需的腳本

二、添加安卓平臺