用Cordova打包Vue項目的方法步驟
現(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。這個引入在瀏覽器打開會報錯。要打包后運行在真機后方可看到效果
<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的事件，打包在真機上才能實現(xiàn)監(jiān)聽）。
第四步：將vue打包好的文件放到cordova項目中并打包cordova run android,會生成一個可執(zhí)行的apk文件，也可以直接在真機上運行。安裝即可。
友情提示：
如果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)用能夠訪問例如照相機和電池狀態(tài)相關(guān)的事項。
- www - 包含應(yīng)用源代碼，例如 HTML, JavaScript 和 CSS 文件
- hooks - 包含為個性化應(yīng)用編譯系統(tǒng)所需的腳本
二、添加安卓平臺
cordova platform add android --save
三、在vue項目中生成編譯完成的源文件
npm run build
四、將cordova項目中的www文件夾下的內(nèi)容替換為vue項目中生成的dist文件夾中的內(nèi)容
五、在cordova項目中創(chuàng)建Android應(yīng)用
cordova build android
六、將手機連接在電腦上，運行該 Android 程序
cordova run android
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
自定義指令，其實就是在vue提供的鉤子中寫代碼，這篇文章將從源碼的角度，帶大家深入了解一下Vue2種自定義指令的實現(xiàn)與使用，需要的可以參考一下2023-05-05
vue3配置permission.js和router、pinia實現(xiàn)路由攔截的簡單步驟
這篇文章主要介紹了如何在場景網(wǎng)站中實現(xiàn)對未登錄用戶訪問的攔截,通過配置Pinia,創(chuàng)建一個user.js文件來存儲用戶數(shù)據(jù),并在main.js中進(jìn)行配置,同時通過在router目錄下創(chuàng)建permission.js文件,可以實現(xiàn)對未登錄用戶的攔截,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了vue 封裝 Adminlte3組件的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章介紹了VUE中v-if與v-show的區(qū)別，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-03-03
vue中使用element ui的input框?qū)崿F(xiàn)模糊搜索的輸入框
這篇文章主要介紹了vue中使用element ui的input框?qū)崿F(xiàn)模糊搜索的輸入框,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11
今天小編就為大家分享一篇Vue 中對圖片地址進(jìn)行拼接的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)下拉框篩選表格數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要為大家詳細(xì)介紹了Vue使用echarts定制特殊的儀表盤，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
vue圓形進(jìn)度條環(huán)形進(jìn)度條組件內(nèi)部顯示圖片示例
這篇文章主要為大家介紹了vue圓形進(jìn)度條環(huán)形進(jìn)度條組件內(nèi)部顯示圖片示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
這篇文章主要介紹了解決vue項目打包后提示圖片文件路徑錯誤的問題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07