Heim > Artikel > Web-Frontend > Wie Cordova Vue-Projekte verpackt

Wie Cordova Vue-Projekte verpackt

小云云Original: 2018-01-15 13:33:521845Durchsuche

In diesem Artikel wird hauptsächlich die Verwendung von Cordova zum Packen von Vue-Projekten in Apps vorgestellt. Wenn Sie interessiert sind, können Sie mehr darüber erfahren .

Immer mehr Entwickler in China nutzen Vue, um Hybrid-Apps zu entwickeln. Nachdem jedoch alle die Entwicklung abgeschlossen haben, stellen sie fest, dass sie nicht wissen, wie sie das Vue-Projekt in eine App packen sollen.
Soweit ich jetzt weiß, ist die Verwendung von Weex und Cordova die beliebteste Methode zum Verpacken von Vue-Projekten. Weex wird von Alibaba bereitgestellt und vom Autor von Vue wärmstens empfohlen. Wenn Sie interessiert sind, können Sie es lernen und verwenden. Da ich mit Angular+ionic arbeite, bevorzuge ich Cordova. Jetzt werde ich Ihnen beibringen, wie Sie Cordova zum Verpacken von Vue-Projekten verwenden:

Schritt 1: Cordova installieren

Wenn es ist bereits installiert, überspringen Sie es direkt, andernfalls führen Sie den folgenden Befehl aus:

npm install -g cordova

Wenn dieser Befehl nicht ausgeführt wird, empfehle ich Ihnen, nicht weiterzulesen.

Schritt 2: Erstellen Sie ein neues Cordova-Projekt

Führen Sie den Befehl aus

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

Gehe hier zu Unser Cordova Das Projekt ist erstellt.

Schritt 3: Ändern Sie das Vue-Projekt

Wenn Sie kein Vue-Projekt haben, gehen Sie zu Baidu, um ein neues Vue-Projekt zu erstellen.

Ändern Sie zuerst die index.html des Vue-Projekts

und fügen Sie

<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">

unbedingt hinzufügen dd42d94925fdb9bfa5a5dbe5c987c627 hinzu zwischen den Überschriften Es kann dazu führen, dass sich der Seitenstil ändert. Fügen Sie ihn nicht hinzu. Andernfalls wird empfohlen, ihn hinzuzufügen.

Dann führen Sie cordova.js ein

<body>
  <p id="app"></p>
  <script type="text/javascript" src="cordova.js"></script>
  <!-- built files will be auto injected -->
</body>

Ändern Sie dann main.js in src in den folgenden Code

// 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);

Ändern Sie abschließend die Datei index.js im Konfigurationsordner.

Ändern Sie

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

im Build zu

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

Dann führen Sie

npm run dev

aus, um zu sehen, ob es normal läuft. Hier gibt es keine Erklärung, die problematisch ist.

Schritt 4: Legen Sie die Vue-Datei in das Cordova-Projekt und verpacken Sie sie

Führen Sie sie zuerst im Vue-Projekt aus

npm run build

Nachdem die Ausführung abgeschlossen ist, wird ein dist-Ordner generiert. Suchen Sie diesen Ordner und kopieren Sie alle darin enthaltenen Dateien in den www-Ordner Ihres Cordova-Projekts, um die Originaldateien zu ersetzen.

Dann können Sie

cordova build android

ausführen und eine ausführbare APK-Datei wird generiert, installieren Sie sie einfach.

Damit ist die Verpackung unseres Vue-Projekts abgeschlossen.

Freundliche Erinnerung:

Wenn das Vue-Projekt beim Ausführen von npm run dev oder npm run build auf Probleme stößt, was im Allgemeinen kein Codefehler ist, können Sie die node_modules löschen Ordner und verwenden Sie es npm install Installation.

Wenn die Codeprüfung aufgrund von Eslint fehlschlägt, können Sie die Regeln in der Datei webpack.base.config im Build-Ordner des Vue-Projekts ändern

      {
       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;)
       }
      },

Kommentieren Sie einfach diesen Code.

Verwandte Empfehlungen:

So entfernen Sie #

Beispielfreigabe für die Ladegeschwindigkeitsoptimierung der Vue-Projekt-Homepage

Austausch über gemeinsame Komponenten und Framework-Struktur von Vue-Projekten

Das obige ist der detaillierte Inhalt vonWie Cordova Vue-Projekte verpackt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html npm angular webpack JS default http https ssl

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie den Router in Vue-CliNächster Artikel：So verwenden Sie den Router in Vue-Cli

In Verbindung stehende Artikel

Mehr sehen