Comment Cordova emballe les projets Vue-js tutoriel-php.cn

Comment Cordova emballe les projets Vue

小云云

Libérer： 2018-01-15 13:33:52

original

1843 Les gens l'ont consulté

Cet article présente principalement comment utiliser Cordova pour empaqueter des projets Vue. Il présente en détail comment empaqueter des projets Vue dans des applications. Si vous êtes intéressé, vous pourrez en savoir plus. .

De plus en plus de développeurs en Chine utilisent désormais Vue pour développer des applications hybrides. Cependant, une fois que tout le monde a terminé le développement, ils découvrent qu'ils ne savent pas comment intégrer le projet Vue dans une application.
Pour autant que je sache, le moyen le plus populaire de packager des projets Vue est d'utiliser weex et cordova. Weex est fourni par Alibaba et fortement recommandé par l'auteur de Vue. Si vous êtes intéressé, vous pouvez l'apprendre et l'utiliser. Parce que je travaille en angulaire+ionique, je préfère cordova. Maintenant, je vais vous apprendre à utiliser cordova pour empaqueter des projets Vue :

Étape 1 : Installer cordova

Si il est déjà installé, ignorez-le directement, sinon exécutez la commande suivante :

npm install -g cordova

Copier après la connexion

Si cette commande ne s'exécute pas, alors je vous suggère de ne pas continuer la lecture.

Étape 2 : Créer un nouveau projet Cordova

Exécuter la commande

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

Copier après la connexion

Allez ici pour notre cordova Le projet est créé.

Étape 3 : Modifier le projet vue

Si vous n'avez pas de projet vue, accédez à Baidu pour créer un nouveau projet vue.

Modifiez d'abord le fichier index.html du projet vue

et ajoutez

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

Copier après la connexion

Assurez-vous d'ajouter <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:;"> ceci entre les en-têtes Cela peut entraîner une modification du style de la page. S'il change, ne l'ajoutez pas. Sinon, il est recommandé de l'ajouter.

Puis introduisez cordova.js

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

Copier après la connexion

Puis modifiez le main.js dans src avec le code suivant

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

Copier après la connexion

Modifiez enfin le fichier index.js dans le dossier de configuration

Modifiez le

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

Copier après la connexion

dans le build pour

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

Copier après la connexion

Ensuite, exécutez

npm run dev

Copier après la connexion

pour voir s'il peut fonctionner. Si c'est normal, il n'y a aucune explication problématique ici.

Étape 4 : placez le fichier vue dans le projet cordova et emballez-le

Exécutez-le d'abord dans le projet vue

npm run build

Copier après la connexion

Une fois l'exécution terminée, un dossier dist sera généré. Recherchez ce dossier et copiez tous les fichiers qu'il contient dans le dossier www de votre projet cordova pour remplacer ses fichiers d'origine.

Ensuite, vous pouvez exécuter

cordova build android

Copier après la connexion

et un fichier apk exécutable sera généré, installez-le simplement.

Cela complète le packaging de notre projet vue.

Rappel amical :

Si le projet vue rencontre des problèmes lors de l'exécution de npm run dev ou npm run build, ce qui n'est généralement pas une erreur de code, vous pouvez supprimer les node_modules dossier et utilisez-le npm install installation.

Si la vérification du code échoue à cause d'eslint, vous pouvez modifier les règles dans le fichier webpack.base.config sous le dossier build du projet Vue

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

Copier après la connexion

Commentez simplement ce code.

Recommandations associées :

Comment supprimer #

Partage d'exemple d'optimisation de la vitesse de chargement de la page d'accueil du projet Vue

Partage sur les composants communs et la structure du cadre des projets vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!