首頁  >  文章  >  web前端  >  Cordova如何打包Vue項目

Cordova如何打包Vue項目

小云云
小云云原創
2018-01-15 13:33:521845瀏覽

本文主要介紹了教你用Cordova打包Vue專案的方法,詳細的介紹瞭如何Vue專案打包成app,具有一定的參考價值,有興趣的可以了解一下,希望能幫助到大家。

現在國內越來越多的開發者使用Vue開發混合app,但是當大家開發完成過後才發現不知道該怎麼將Vue專案打包成app。
根據我現在的了解打包Vue專案目前流行的就是使用weex和cordova。 weex是阿里提供並且Vue的作者也極力推薦的,有興趣的可以去學習使用一下。因為我本身是做angular+ionic的,所以比較青睞cordova,下面我就教大家怎麼使用cordova打包Vue項目:

第一步:安裝cordova



#如果已經安裝則直接跳過,否則執行以下命令:

npm install -g cordova

如果這個命令都不會運行,那我建議你不要繼續往下看了。

第二步:新cordova專案

執行指令

cordova create cordovaApp com.cordova.testapp
cd cordovaApp
cordova platform add android

到這裡我們的cordova專案就創建好了。


第三個步驟:修改vue專案

如果你沒有vue專案的話,自行百度去新建一個vue專案吧。

首先修改vue專案的index.html

在head之間加入


#

<meta http-equiv="Content-Security-Policy" content="default-src &#39;self&#39; data: gap: https://ssl.gstatic.com &#39;unsafe-eval&#39;; style-src &#39;self&#39; &#39;unsafe-inline&#39;; media-src *; img-src &#39;self&#39; 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">

這裡注意加入

092956dc71be5cfcc459b64fdfefb48f

這個的時候可能導致頁面樣式改變,如果改變則不加,否則還是建議加上。


然後引入cordova.js

<body>
  <p id="app"></p>
  <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 &#39;vue&#39;
import App from &#39;./App&#39;
import router from &#39;./router&#39;
Vue.config.productionTip = false

/* eslint-disable no-new */

document.addEventListener(&#39;deviceready&#39;, function() {
  new Vue({
    el: &#39;#app&#39;,
    router,
    store,
    template: &#39;<App/>&#39;,
    components: { App }
  })
  window.navigator.splashscreen.hide()
}, false);
最後修改config資料夾中的index.js檔案

修改build中的


    assetsSubDirectory: &#39;static&#39;,
    assetsPublicPath: &#39;/&#39;,


    assetsSubDirectory: &#39;&#39;,
    assetsPublicPath: &#39;&#39;,

然後執行


npm run dev

看看是否能夠運行起來,如果正常說明到這裡是沒有問題的。

第四個步驟:將vue檔案放到cordova專案中並打包

#先在vue專案中執行


npm run build

執行完成後會產生一個dist資料夾,找到這個資料夾將裡面的所有檔案複製到你的cordova專案的www資料夾下替換它原有的檔案。


然後就可以執行

cordova build android

會產生一個可執行的apk文件,安裝即可。

到這裡就完成了我們vue專案的打包。

友情提示:

如果vue專案在執行npm run dev或npm run build的時候遇到問題一般不是程式碼出錯的話可以將node_modules資料夾刪除使用npm install安裝。

如果是因為eslint導致程式碼檢查不通過的話,可以將Vue專案的build資料夾下的webpack.base.config檔中的rules

######## #
      {
       test: /\.(js|vue)$/,
       loader: &#39;eslint-loader&#39;,
       enforce: &#39;pre&#39;,
       include: [resolve(&#39;src&#39;), resolve(&#39;test&#39;)],
       options: {
        formatter: require(&#39;eslint-friendly-formatter&#39;)
       }
      },
###這段程式碼註解即可。 ######相關推薦:############如何移除vue專案中的#############vue專案首頁載入速度最佳化實例分享## ##########關於vue專案常用元件和框架結構分享######

以上是Cordova如何打包Vue項目的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn