Maison > Article > interface Web > 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
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.
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!