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