教你用Cordova打包Vue項目的方法
現(xiàn)在國內越來越多的開發(fā)者使用Vue開發(fā)混合app，但是當大家開發(fā)完成過后才發(fā)現(xiàn)不知道該怎么將Vue項目打包成app。
據(jù)我現(xiàn)在的了解打包Vue項目目前流行的就是使用weex和cordova。weex是阿里提供并且Vue的作者也極力推薦的，有興趣的可以去學習使用一下。因為我本身是做angular+ionic的，所以比較青睞cordova，下面我就教大家怎么使用cordova打包Vue項目：
第一步：安裝cordova
如果已經(jīng)安裝則直接跳過，否則執(zhí)行以下命令：
npm install -g cordova
如果這個命令都不會運行，那我建議你不要繼續(xù)往下看了。
第二步：新建cordova項目
執(zhí)行命令
cordova create cordovaApp com.cordova.testapp cd cordovaApp cordova platform add android
到這里我們的cordova項目就創(chuàng)建好了。
第三步：修改vue項目
如果你沒有vue項目的話，自行百度去新建一個vue項目吧。
首先修改vue項目的index.html
在head之間加入
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
這里注意加入<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">這個的時候可能導致頁面樣式改變，如果改變則不加，否則還是建議加上。
然后引入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
/* eslint-disable no-new */
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: '',
然后運行
npm run dev
看看是否能夠運行起來，如果正常說明到這里是沒有問題的。
第四步：將vue文件放到cordova項目中并打包
先在vue項目中運行
npm run build
執(zhí)行完成后會生成一個dist文件夾，找到這個文件夾將里面的所有文件復制到你的cordova項目的www文件夾下替換它原有的文件。
然后就可以執(zhí)行
cordova build android
會生成一個可執(zhí)行的apk文件，安裝即可。
到這里就完成了我們vue項目的打包。
友情提示：
如果vue項目在運行npm run dev或者npm run build的時候遇到問題一般不是代碼出錯的話可以將node_modules文件夾刪除使用npm install安裝。
如果是因為eslint導致代碼檢查不通過的話，可以將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')
}
},
這段代碼注釋即可。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
在Electron環(huán)境下,截屏功能相對強大,可以通過desktopCapturer獲取應用視頻流,實現(xiàn)對整個應用的截屏,而在非Electron環(huán)境下,截屏功能受限,只能截取瀏覽器內容,且存在iframe或base64圖片加載問題2024-10-10
這篇文章主要給大家介紹了關于Vue單頁面骨架屏實踐的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-12-12
今天小編就為大家分享一篇vue中當圖片地址無效的時候,顯示默認圖片的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家學習介紹了Vue如何利用廣度優(yōu)先搜索實現(xiàn)watch（有意思），文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學習一下2023-08-08
這篇文章主要介紹了vue中如何下載文件導出保存到本地，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue中使用elementUI自定義校驗及點擊提交不生效問題解決辦法
我們在項目中經(jīng)常會用到ElementUI的表單驗證,下面這篇文章主要給大家介紹了關于vue中使用elementUI自定義校驗及點擊提交不生效問題解決的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue3+Vue-cli4項目中使用騰訊滑塊驗證碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-11-11
axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端。這篇文章主要介紹了vue axios 簡單封裝以及思考 ,需要的朋友可以參考下2018-10-10
這篇文章給大家介紹了通過vue的方式，實現(xiàn)掃碼功能，實現(xiàn)步驟分為兩步，本文通過實例代碼給大家介紹的非常詳細，感興趣的朋友跟隨小編一起看看吧2021-11-11
Vue使用Echarts實現(xiàn)大屏可視化布局示例詳細講解
這篇文章主要介紹了Vue使用Echarts實現(xiàn)大屏可視化布局示例，本文通過實例代碼圖文相結合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01