Empaquetage de projet Vue3

Lorsque vous êtes prêt à publier votre application dans l'environnement de production, vous devez empaqueter le projet Vue.

Utilisez la commande suivante pour empaqueter le projet Vue :

npm run build

Exécutez la commande ci-dessus, et la sortie est la suivante :

Après exécution, un répertoire sera généré dans le projet Vue : le répertoiredist, qui contient généralement le fichier index.html et le répertoire static. Le répertoire static contient les fichiers statiques js, css, et le répertoire d'images images (s'il y a des images).

Si vous double-cliquez directement pour ouvrir index.html, la page peut être vide dans le navigateur. Pour l'afficher correctement, vous devez modifier les chemins des fichiers js et css dans le fichier index.html.

Par exemple, lorsque nous ouvrons le fichier dist/index.html, nous voyons que les chemins des fichiers css et js sont des chemins absolus :

<link href=/static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
<script type=text/javascript src=/static/js/app.717bb358ddc19e181140.js></script>
...

Nous modifions les chemins des fichiers js et css en chemins relatifs :

<link href=static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
<script type=text/javascript src=static/js/app.717bb358ddc19e181140.js></script>
...

De cette façon, vous pouvez double-cliquer directement sur le fichier dist/index.html pour voir l'effet dans le navigateur.