web-dev-qa-db-fra.com

Exécutez l'application VueJS sur Localhost

J'ai essayé de lancer une simple application VueJS construite avec Vue CLI/Webpack dans mon hôte local sans avoir à utiliser npm run dev, mais uniquement en accédant à partir de mon serveur local. J'ai exécuté le npm exécutez la construction et faites glisser les fichiers dans mes htdocs sur Mamp, mais cela ne semble toujours pas fonctionner. Voici ma structure de répertoires dans le projet:

enter image description here

enter image description here

Ceci est mon index.html dans mon dossier racine

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>demo</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

et ceci est le index.html dans le dossier dist

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <meta name=viewport content="width=device-width,initial-scale=1">
  <title>demo</title>
  <link href=/static/css/app.e1c36c05dd8e70649268723708cfb519.css rel=stylesheet>
</head>
<body>
  <div id="app"></div>
  <script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js>
  </script><script type=text/javascript src=/static/js/vendor.3fae27b6d0a0572472a3.js></script>
  <script type=text/javascript src=/static/js/app.e5eb3a5fa6134479362c.js></script>
</body>
</html>

Qu'est-ce que je rate?

Je vous remercie!

javascriptnpmwebpackvue.jslocalhost
4
Luiz Wynne

1 - npm run build

2 - copiez le dossier build dist ou dist avec index.html

3 - créer un nouveau dossier dans htdocs test

4 - allez à localhost/test

Si les choses ne fonctionnent pas, affichez la source dans un éditeur de texte et changez les chemins de vos fichiers src et ajoutez peut-être un href de base. Votre code affiche /static/

Je remplacerais

<script type=text/javascript src=/static/js/app.e5eb3a5fa6134479362c.js></script>

Ça aussi

<script type=text/javascript src="http://localhost/test/static/js/app.e5eb3a5fa6134479362c.js"></script>

Vérifiez également les erreurs de console.

4
TheBlackBenzKid

Est-ce comme une page blanche? avez-vous eu une erreur dans la console?

Je pense que c'est parce qu'il ne sait pas où se trouve le fichier d'index racine.

Essayez:
- Accédez au "dossier htdocs" et créez un dossier vide (exemple de nom de dossier: abc).
- Accédez au "dossier config" dans votre projet.
- À l'intérieur du "dossier config" se trouve un fichier js appelé index.js
- à l'intérieur de index.js changez le chemin "assetsPublicPath" sous build, par défaut a seulement '/'. Changez-le en '/ abc /' et exécutez npm build après avoir mis tous les fichiers générés à partir de la construction à l'intérieur de ce dossier, il devrait savoir où trouver le fichier d'index racine.
- Accédez à http: // localhost/abc /

1
Vic24032018tor