Wie Cordova Vue-Projekte verpackt-js-Tutorial-php.cn

Wie Cordova Vue-Projekte verpackt

小云云

Freigeben： 2018-01-15 13:33:52

Original

1881 Leute haben es durchsucht

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Ändern Sie

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

Nach dem Login kopieren

im Build zu

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

Nach dem Login kopieren

Dann führen Sie

npm run dev

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!