Cordova如何打包Vue項目-js教程-PHP中文網

首頁

web前端

js教程

Cordova如何打包Vue項目

小云云

Jan 15, 2018 pm 01:33 PM

cordova 如何專案

本文主要介紹了教你用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">

登入後複製

這裡注意加入

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

然後引入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

熱AI工具

熱工具

熱門話題

Java教學

1672

CakePHP 教程

1428

Laravel 教程

1332

PHP教程

1276

C# 教程

1256

Related knowledge

AI攻克費馬大定理？數學家放棄5年職業生涯，將100頁證明變代碼 Apr 09, 2024 pm 03:20 PM

費馬大定理，即將被AI攻克？而整件事最有意義的地方在於，AI即將解決的費馬大定理，正是為了證明AI無用。曾經，數學屬於純粹的人類智力王國；如今，這片疆土正被先進的演算法所破解，所踐踏。圖片費馬大定理，是一個「臭名昭著」的謎題，在幾個世紀以來，一直困擾著數學家。它在1993年被證明，而現在，數學家們有一個偉大計畫：用電腦把證明過程重現。他們希望在這個版本的證明中，如果有任何邏輯上的錯誤，都可以由電腦檢查出來。專案網址：https://github.com/riccardobrasca/flt

分享PyCharm專案打包的簡易方法 Dec 30, 2023 am 09:34 AM

簡單易懂的PyCharm專案打包方法分享隨著Python的流行，越來越多的開發者使用PyCharm作為Python開發的主要工具。 PyCharm是功能強大的整合開發環境，它提供了許多方便的功能來幫助我們提高開發效率。其中一個重要的功能就是專案的打包。本文將介紹如何在PyCharm中簡單易懂地打包項目，並提供具體的程式碼範例。為什麼要打包專案？在Python開發

PyCharm實用技巧：將項目轉換為可執行EXE文件 Feb 23, 2024 am 09:33 AM

PyCharm是一款功能強大的Python整合開發環境，提供了豐富的開發工具和環境配置，讓開發者更有效率地編寫和除錯程式碼。在使用PyCharm進行Python專案開發的過程中，有時候我們需要將專案打包成可執行的EXE文件，以便在沒有安裝Python環境的電腦上執行。本文將介紹如何使用PyCharm將專案轉換為可執行的EXE文件，同時給出具體的程式碼範例。首

深入了解PyCharm：快速刪除項目的方法 Feb 26, 2024 pm 04:21 PM

標題：深入了解PyCharm：刪除專案的高效方式近年來，Python作為一種強大而靈活的程式語言，受到越來越多開發者的青睞。在Python專案的開發中，選擇一個高效的整合開發環境至關重要。 PyCharm作為一款功能強大的整合開發環境，為Python開發者提供了許多便利的功能和工具，其中包括快速、有效率地刪除專案目錄。以下將著重介紹如何使用PyCharm中的刪除

製作 iPhone 上 iOS 17 提醒應用程式中的購物清單的方法 Sep 21, 2023 pm 06:41 PM

如何在iOS17中的iPhone上製作GroceryList在「提醒事項」應用程式中建立GroceryList非常簡單。你只需添加一個列表，然後用你的項目填充它。該應用程式會自動將您的商品分類，您甚至可以與您的伴侶或扁平夥伴合作，列出您需要從商店購買的東西。以下是執行此操作的完整步驟：步驟1：開啟iCloud提醒事項聽起來很奇怪，蘋果表示您需要啟用來自iCloud的提醒才能在iOS17上建立GroceryList。以下是它的步驟：前往iPhone上的「設定」應用，然後點擊[您的姓名]。接下來，選擇i

基於開源的 ChatGPT Web UI 項目，快速建立屬於自己的 ChatGPT 站點 Apr 15, 2023 pm 07:43 PM

身為科技部落客，了不起比較喜歡各種折騰，之前給大家介紹過ChatGPT接入微信，釘釘和知識星球（如果沒看過的可以翻翻前面的文章），最近再看開源專案的時候，發現了一個ChatGPTWebUI專案。想著剛好之前沒有將ChatGPT接入WebUI，有了這個開源專案可以拿來使用，真是不錯，下面是實操的安裝步驟，分享給大家。安裝官方在Github的專案文件上提供了很多中的安裝方式，包括手動安裝，docker部署，以及遠端部署等方法，了不起在選擇部署方式的時候，一開始為了簡單想著

基礎教學：使用IDEA建立Maven項目 Feb 19, 2024 pm 04:43 PM

IDEA（IntelliJIDEA）是一款強大的整合開發環境，可協助開發人員快速且有效率地開發各種Java應用程式。在Java專案開發中，使用Maven作為專案管理工具能夠幫助我們更好地管理依賴函式庫、建置專案等。本文將詳細介紹如何在IDEA中建立一個Maven專案的基本步驟，同時提供具體的程式碼範例。步驟一：開啟IDEA並建立新專案開啟IntelliJIDEA

react啟動專案報錯怎麼辦 Dec 27, 2022 am 10:36 AM

react啟動專案報錯的解決方法：1、進入專案資料夾，啟動專案並查看報錯資訊；2、執行「npm install」或「npm install react-scripts」指令；3、執行「npm install @ant-design/ pro-field --save」指令。

See all articles

Cordova如何打包Vue項目

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題