用Cordova打包Vue項目的方法步驟

2019-11-19 12:10:50

字體：大中小

來源：轉載

供稿：網友

現在國內越來越多的開發者使用Vue開發混合app，但是當大家開發完成過后才發現不知道該怎么將Vue項目打包成app。

現在的打包Vue項目目前流行的就是使用weex和cordova。weex是阿里提供并且Vue的作者也極力推薦的，有興趣的可以去學習使用一下。下面說說怎么使用cordova打包Vue項目：

第一步：安裝cordova,創建好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 = 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: '',

第三步：運行

看看是否能夠運行起來，如果正常說明到這里是沒有問題的（注意這里運行的時候需要將document.addEventListener注釋，
因為在瀏覽器環境下是找不到cordova.js的也就不能監聽到deviceready的事件，打包在真機上才能實現監聽）。

第四步：將vue打包好的文件放到cordova項目中并打包cordova run android,會生成一個可執行的apk文件，也可以直接在真機上運行。安裝即可。

友情提示：

如果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')   }  },

這段代碼注釋即可。

PS：通過cordova將vue項目打包成app

一、創建一個cordova工程