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 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' 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 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
document.addEventListener('deviceready', function() {
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})
window.navigator.splashscreen.hide()
}, false);Nach dem Login kopieren
Ändern Sie abschließend die Datei index.js im Konfigurationsordner.
Ändern Sie
assetsSubDirectory: 'static',
assetsPublicPath: '/',Nach dem Login kopieren
im Build zu
assetsSubDirectory: '',
assetsPublicPath: '',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: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},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!
