Une introduction au processus de construction, de packaging et de publication des projets vue

Cet article présente principalement le processus de construction, de packaging et de publication du projet Vue. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

De nombreux amis sont intéressés. dans VUE. Si vous n'êtes pas familier avec une série de processus de projet, l'éditeur a réglé l'ensemble du processus de construction, d'empaquetage et de publication du projet Vue en fonction des questions soulevées par les internautes.

1. Création du projet vue

1. Tout d'abord, Node.js et npm doivent être disponibles. 🎜>
2. Installez l'échafaudage

Vous pouvez naviguer directement en ce moment - mais maintenant il doit y avoir de nombreux novices qui souhaitent le publier sur gitHub et le parcourir , utilisez vue Family Bucket crée son propre blog. Maintenant, laissez-moi parler de la façon de publier le projet vue sur github. J'ai écrit sur la construction de l'environnement vue avant de pouvoir vous référer à : construction de l'environnement vue

2. Packaging du projet vue

1. Tout le monde sait utiliser npm run build pour l'empaquetage. À ce stade, si vous ouvrez directement index.html sous dist/, vous constaterez que le fichier peut être ouvert, mais tous les js, css. , img et d'autres chemins pointent vers la racine. Répertoire,

À ce stade, vous devez modifier le champ assetsPublicPath dans config/index.js. Le projet initial est /, qui pointe vers le répertoire racine du projet, c'est pourquoi une erreur se produit. À ce moment, il est remplacé par ./

./ Répertoire actuel ../ Répertoire parent/ Répertoire racine

Répertoire racine : Dans le répertoire racine de l'ordinateur. système de fichiers, le répertoire racine fait référence au répertoire de niveau supérieur du lecteur logique, qui est un sous-répertoire relatif

C'est comme la « racine » d'un grand arbre. Toutes les branches partent de ce répertoire, il est donc nommé répertoire racine. Prenons comme exemple le système d'exploitation Windows développé par Microsoft :

Ouvrez Poste de travail (Ordinateur), double-cliquez sur le lecteur C pour accéder au répertoire racine du lecteur C. Double-cliquez sur le lecteur D pour entrer dans le répertoire racine du lecteur D

build: {
  env: require('./prod.env'),
  index: path.resolve(__dirname, '../dist/index.html'),
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: './',
  productionSourceMap: true,
  // Gzip off by default as many popular static hosts such as
  // Surge or Netlify already gzip all static assets for you.
  // Before setting to `true`, make sure to:
  // npm install --save-dev compression-webpack-plugin
  productionGzip: false,
  productionGzipExtensions: ['js', 'css'],
  // Run the build command with an extra argument to
  // View the bundle analyzer report after build finishes:
  // `npm run build --report`
  // Set to `true` or `false` to always turn it on or off
  bundleAnalyzerReport: process.env.npm_config_report
 }

et ouvrez le fichier d'index à partir du répertoire racine dist pour y accéder.

3. Pages github

1. Créez un entrepôt sur la page d'accueil, ignorez-le ici

<.>2. Sélectionnez master ou /doc ici pour télécharger le code sur master

3 Il y a une ligne de nom de domaine ci-dessus qui est votre propre page où vous pouvez voir. les projets que vous avez publiés

4. Nom de domaine personnalisé

1. Vous pouvez parcourir vos propres projets à ce moment. , mais

username.github.io/xxx/dist

Ce genre d'adresse n'est vraiment pas très beau. Vous pouvez aller sur Alibaba Cloud, acheter un nom de domaine vous-même, et. analysez-le. Il est disponible en ligne et peut être personnalisé. Utilisez le nom de domaine pour créer votre propre blog et déployez le code sur github.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment configurer Sass dans l'échafaudage vue

Comment utiliser des données fictives dans le projet vue-cli

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!