Configuration de l'environnement de développement Vue3 et de l'environnement de production

Configuration de l'environnement d'emballage Vue3

Habituellement, les adresses de requête utilisées dans l'environnement de développement et l'environnement formel sont différentes au travail. La plupart des méthodes consistent à modifier manuellement l'adresse de requête, mais le risque que des modifications manuelles provoquent des erreurs sera plus grand, donc vue-cli3 fournit 'environment variables et modèles ' ( variables de modèle et d'environnement | Vue CLI ), grâce à cette méthode, nous pouvons modifier l'adresse de la demande via des commandes, réduisant ainsi le risque d'erreurs causées par des modifications manuelles.

Remarque : Il y a un point anglais (.) avant et après env dans le nom du fichier créé. Ici, pour faciliter les tests, l'adresse de la requête est consolé pour faciliter l'observation.

process.env.VUE_APP_BASE_API peut obtenir le contenu variable associé

1. Méthode de configuration de l'adresse de demande de développement local

development Créez un fichier .env. dans le répertoire racine du projet (le même répertoire que le fichier package.json)

Contenu VUE_APP_BASE_API = 'Adresse de demande de packaging de l'environnement de test'

À ce stade, exécutez (npm run serve) et le contenu de sortie process.env.VUE_APP_BASE_API est "l'adresse de demande d'emballage de l'environnement de test"

Remarque : Étant donné que la modification des fichiers externes ne déclenchera pas la mise à jour à chaud de vue-cli, chaque modification apportée au fichier ici doit être réexécutée une fois.

2. La méthode de configuration de l'adresse de demande de package de test local est la même que la première étape, mais un fichier avec un nom différent est créé.

Créez un fichier : .env.test

Contenu : VUE_APP_BASE_API = 'Adresse de demande d'empaquetage de l'environnement de test'

Configurez le fichier package.json Ajoutez la commande "test": "vue-cli-service build --mode test",

Remarque : "test": "vue-cli-service build --mode test" Le dernier nom "test" de cette commande n'est pas fixe tant qu'il est identique au nom du fichier créé ".env. '

Le nom suivant correspond à

Exécutez la commande d'empaquetage pour voir l'effet (car elle est empaquetée dans l'environnement de test, la commande d'empaquetage à exécuter est npm run test)

ok parfait erreur hahaha

Notez ici que le fichier index.html empaqueté par vue-cli ne peut pas être ouvert directement. Le fichier vue.config.js doit être configuré. En raison de la structure simplifiée du fichier vue-cli3, ce fichier doit être créé par lui-même .

contenu:

module.exports = {

publicPath : process.env.NODE_ENV === 'production' ? './' : '',

productionSourceMap : process.env.NODE_ENV === 'production' ? faux vrai,

outputDir : process.env.outputDir,

} ;
Afficher l'effet

fonctionne parfaitement

Maintenant, il n'y a que la configuration de l'emballage de l'environnement officiel final

3. Créez un fichier .env. production Contenu : VUE_APP_BASE_API = 'Adresse de demande d'empaquetage d'environnement officiel en ligne'

Exécutez la commande npm run build directement dans le package

Les première et troisième étapes n'ont pas besoin de configurer le fichier package.json car ces deux commandes sont déjà intégrées à cli3 et n'ont pas besoin d'être configurées

Insuffisances, j'espère que vous pourrez me donner beaucoup de conseils

# Bienvenue dans l'éditeur Markdown

Bonjour! Il s'agit de la page d'accueil qui s'affiche la première fois que vous utilisez l'éditeur Markdown . Si vous souhaitez apprendre à utiliser l'éditeur Markdown, vous pouvez lire attentivement cet article pour comprendre la syntaxe de base de Markdown.

nouveaux changements

Nous avons fait quelques extensions fonctionnelles et un support de syntaxe pour l'éditeur Markdown. En plus des fonctions standard de l'éditeur Markdown, nous avons ajouté les nouvelles fonctionnalités suivantes pour vous aider à écrire des blogs avec :

La nouvelle conception de l'interface apportera une nouvelle expérience d'écriture;
Définissez votre style de surbrillance de code préféré dans le centre de création, et Markdown affichera le style de surbrillance sélectionné dans l'extrait de code ;
Ajout de la fonction glisser-déposer d'image, vous pouvez directement faire glisser et déposer des images locales dans la zone d'édition pour un affichage direct ;
Nouvelle syntaxe de formule mathématique KaTeX ;
Ajout de la fonction sirène syntaxe ¹ qui prend en charge les diagrammes de Gantt ;
Ajout de la fonction d'édition d'articles Markdown sur plusieurs écrans ;
Ajout de fonctions telles que le mode d'écriture ciblée, le mode de prévisualisation, le mode d'écriture concise et les paramètres de roue de synchronisation des zones gauche et droite.Le bouton de fonction est situé au milieu de la zone d'édition et de la zone de prévisualisation ;
Ajout de la fonctionnalité de liste de contrôle.

Touche de raccourci de fonction

Ctrl/Command+ Annuler : + Z
Rétablir : + Gras : + Italique : + Titre : + + Liste non triée : + + Liste triée : + + Liste de contrôle : + + Insérer un code : + + Insérer un lien : + + Insérer une image : + + Rechercher : + Remplacer : +Ctrl/CommandY
Ctrl/CommandB
Ctrl/CommandI
Ctrl/CommandShiftH
Ctrl/CommandShiftU
Ctrl/CommandShiftO
Ctrl/CommandShiftC
Ctrl/CommandShiftK
Ctrl/CommandShiftL
Ctrl/CommandShiftG
Ctrl/CommandF
Ctrl/CommandG

La création raisonnable du titre est utile pour la génération du catalogue

Entrez 1 fois directement #et appuyez dessus space, et un titre de niveau 1 sera généré.
Après avoir entré 2 fois #et appuyé dessus space, un titre à 2 niveaux sera généré.
Par analogie, nous supportons 6 niveaux de rubriques. TOCAide à générer une table des matières parfaite après avoir utilisé la syntaxe.

Comment changer le style du texte

texte souligné texte souligné

texte en gras texte en gras

texte de balisage

~~supprimer du texte~~

texte cité

H2O est un liquide _.

2 ¹⁰ résultat de l'opération est 1024.

Insérer des liens et des images

lien : lien .

image: Autre

Photo avec dimensions :

Image centrée : Autre

Images centrées et dimensionnées :

Bien sûr, afin de le rendre plus pratique pour les utilisateurs, nous avons ajouté la fonction de glisser-déposer des images.

Comment insérer un beau morceau de code

Accédez à la page des paramètres du blog , choisissez un style de surbrillance d'extrait de code que vous aimez, et la même surbrillance est illustrée ci-dessous 代码片.

// An highlighted block
var foo = 'bar';

Générez une liste qui fonctionne pour vous

projet
- projet
  - projet

objet 1
article 2
article 3

Tâches planifiées
mission accomplie

créer un formulaire

Un tableau simple est créé comme ceci :

projet	Valeur
ordinateur	1600 $
téléphone portable	12 $
cathéter	1 $

Définir le contenu pour qu'il soit centré, à gauche et à droite

Utiliser :---------:le centre
Utiliser :----------la gauche
Utiliser ----------:la droite

première rangée	La deuxième colonne	troisième colonne
Centrer la première colonne de texte	La deuxième colonne de texte est alignée à droite	Texte de la troisième colonne à gauche

SmartyPants

SmartyPants convertit les caractères de ponctuation ASCII en entités HTML de ponctuation typographique "intelligentes". Par exemple:

TAPER	ASCII	HTML
Backticks simples	`'Isn't this fun?'`	« N'est-ce pas amusant ?
Devis	`"Isn't this fun?"`	"N'est-ce pas amusant ?"
Tirets	`-- is en-dash, --- is em-dash`	– est un tiret demi-cadratin, — est un tiret cadratin

créer une liste personnalisée

Réduction

Outil de conversion de texte en HTML

Auteurs

John

Luc

Comment créer une note de bas de page

Un texte avec des notes de bas de page. ²

Les annotations sont également essentielles

Markdown convertit le texte en HTML .

Formule mathématique KaTeX

Vous pouvez rendre des expressions mathématiques LaTeX en utilisant KaTeX :

Infrastructure gamma $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ est l'intégrale d'Euler

$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.$

Vous pouvez trouver plus d'informations sur les expressions mathématiques LaTeX ici .

Nouvelle fonctionnalité de diagramme de Gantt pour enrichir vos articles

Pour la syntaxe du diagramme de Gantt, reportez-vous ici ,

Diagrammes UML

Peut être rendu à l'aide de diagrammes UML. Sirène Par exemple, un diagramme de séquence généré ci-dessous :

Cela générera un organigramme. :

Pour la syntaxe de Mermaid , reportez-vous ici ,

Organigramme organigramme

Nous prendrons toujours en charge l'organigramme de l'organigramme :

Pour la syntaxe de l'organigramme Flowchart , reportez-vous ici .

Exporter et importer

exporter

Si vous voulez essayer d'utiliser cet éditeur, vous pouvez modifier cet article librement. Lorsque vous avez fini d'écrire un article, recherchez Exportation d'article pour générer un fichier .md ou un fichier .html pour le stockage local.

importer

Si vous souhaitez charger un fichier .md que vous avez écrit, vous pouvez sélectionner la fonction d'importation dans la barre d'outils supérieure pour importer le fichier avec l'extension correspondante et
continuer votre création.

description de la syntaxe de la sirène ↩︎
Explication des notes de bas de page↩︎