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

Cordova如何打包Vue項目

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

本文主要介紹了教你用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中文網其他相關文章！

html npm angular webpack JS default http https ssl

陳述：

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

上一篇：vue-cli中router使用方法下一篇：vue-cli中router使用方法

看更多