用Cordova打包Vue項目

如今國內愈來愈多的開發者使用Vue開發混合app,可是當你們開發完成事後才發現不知道該怎麼將Vue項目打包成app。
如今的打包Vue項目目前流行的就是使用weex和cordova。weex是阿里提供而且Vue的做者也極力推薦的,有興趣的能夠去學習使用一下。下面說說怎麼使用cordova打包Vue項目:javascript

第一步:安裝cordova,建立好cordova項目。

第二步:修改vue項目

首先修改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打包好的文件放到cordova項目中並打包cordova run android,會生成一個可執行的apk文件,也能夠直接在真機上運行。安裝便可。

友情提示:

若是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

相關文章
相關標籤/搜索