Maison > Article > interface Web > Comment Cordova emballe les projets Vue

Comment Cordova emballe les projets Vue

小云云original: 2018-01-15 13:33:521844parcourir

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

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

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

Assurez-vous d'ajouter dd42d94925fdb9bfa5a5dbe5c987c627 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>

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

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

Modifiez le

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

dans le build pour

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

Ensuite, exécutez

npm run dev

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

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

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

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!

html npm angular webpack JS default http https ssl

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser le routeur dans vue-cliArticle suivant：Comment utiliser le routeur dans vue-cli

Articles Liés

Voir plus