現(xiàn)在國內(nèi)越來越多的開發(fā)者使用Vue開發(fā)混合app，但是當(dāng)大家開發(fā)完成過后才發(fā)現(xiàn)不知道該怎么將Vue項(xiàng)目打包成app。
現(xiàn)在的打包Vue項(xiàng)目目前流行的就是使用weex和cordova。weex是阿里提供并且Vue的作者也極力推薦的，有興趣的可以去學(xué)習(xí)使用一下。下面說說怎么使用cordova打包Vue項(xiàng)目：
第一步：安裝cordova,創(chuàng)建好cordova項(xiàng)目。
第二步：修改vue項(xiàng)目
首先修改vue項(xiàng)目的index.html，引入cordova.js。這個(gè)引入在瀏覽器打開會報(bào)錯(cuò)。要打包后運(yùn)行在真機(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 = falsedocument.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: '',
第三步：運(yùn)行
看看是否能夠運(yùn)行起來，如果正常說明到這里是沒有問題的（注意這里運(yùn)行的時(shí)候需要將document.addEventListener注釋，
因?yàn)樵跒g覽器環(huán)境下是找不到cordova.js的也就不能監(jiān)聽到deviceready的事件，打包在真機(jī)上才能實(shí)現(xiàn)監(jiān)聽）。
第四步：將vue打包好的文件放到cordova項(xiàng)目中并打包c(diǎn)ordova run android,會生成一個(gè)可執(zhí)行的apk文件，也可以直接在真機(jī)上運(yùn)行。安裝即可。
友情提示：
如果vue項(xiàng)目在運(yùn)行npm run dev或者npm run build的時(shí)候遇到問題一般不是代碼出錯(cuò)的話可以將node_modules文件夾刪除使用npm install安裝。
如果是因?yàn)閑slint導(dǎo)致代碼檢查不通過的話，可以將Vue項(xiàng)目的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項(xiàng)目打包成app
一、創(chuàng)建一個(gè)cordova工程
cordova create cordovaVuecd cordovaVueconfig.xml -包含應(yīng)用相關(guān)信息，使用到的插件以及面向的平臺 platforms - 包含應(yīng)用運(yùn)行平臺如 Android 和 iOS 上對應(yīng)的 Cordova 庫 plugins - 包含應(yīng)用所需插件的 Cordova 庫，使得應(yīng)用能夠訪問例如照相機(jī)和電池狀態(tài)相關(guān)的事項(xiàng)。 www - 包含應(yīng)用源代碼，例如 HTML, JavaScript 和 CSS 文件 hooks - 包含為個(gè)性化應(yīng)用編譯系統(tǒng)所需的腳本
新聞熱點(diǎn)
疑難解答
圖片精選
