J'ai créé un nouveau projet VueJS en utilisant l'interface utilisateur de Vue. Cela s'exécute localement sur http: // localhost: 8080 / sans erreur. De plus, tout va bien lorsque j'exécute la tâche de construction. Cependant, lorsque je prends les fichiers qui sont construits et placés dans le dossier dist et que je les télécharge sur mon package d'hébergement via FTP, j'obtiens une page HTML vierge et le code source est le suivant. Clairement pas comme mon hôte local.
Juste pour noter que j'ai essayé ceci sur deux packages d'hébergement différents et j'obtiens le même résultat. Toute aide est la bienvenue.
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<!--[if IE]><link rel="icon" href="/favicon.ico"><![endif]-->
<link href=/css/app.deed7380.css rel=preload as=style>
<link href=/js/app.1e49a2f5.js rel=preload as=script>
<link href=/js/chunk-vendors.0e42f062.js rel=preload as=script>
<link href=/css/app.deed7380.css rel=stylesheet>
<link rel=icon type=image/png sizes=32x32 href=/img/icons/favicon-32x32.png>
<link rel=icon type=image/png sizes=16x16 href=/img/icons/favicon-16x16.png>
<link rel=manifest href=/manifest.json>
<meta name=theme-color content=#4DBA87>
<meta name=apple-mobile-web-app-capable content=no>
<meta name=apple-mobile-web-app-status-bar-style content=default>
<meta name=apple-mobile-web-app-title content=pwap>
<link rel=apple-touch-icon href=/img/icons/apple-touch-icon-152x152.png>
<link rel=mask-icon href=/img/icons/safari-pinned-tab.svg color=#4DBA87>
<meta name=msapplication-TileImage content=/img/icons/msapplication-icon-144x144.png>
<meta name=msapplication-TileColor content=#000000>
</head>
<body>
<noscript><strong>We're sorry but pwap doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
<div class=content-wrapper>
<div id=app></div>
</div>
<script src=/js/chunk-vendors.0e42f062.js></script>
<script src=/js/app.1e49a2f5.js></script>
</body>
</html>
3 Réponses :
Le problème est que vos fichiers de construction sont créés avec le mauvais chemin d'accès à vos éléments.
Afin de supprimer le préfixe / à l'origine de votre problème, vous devez modifier le fichier de configuration index.js dans le dossier de configuration de votre projet:
de assetsPublicPath: '/',
vers assetsPublicPath: '',
Ensuite, reconstruisez votre application, elle devrait maintenant disparaître et votre application devrait maintenant s'afficher.
Si vous utilisez Vue UI pour créer votre application, vous devez procéder comme suit:
Ouvrez votre projet dans Vue UI et accédez à l'onglet de configuration. Là, vous sélectionnerez "Vue cli" et vous devrez ensuite supprimer le / dans le champ de saisie baseUrl (dans la capture d'écran norvégienne ci-dessous, il s'agit du libellé "URL-utgangspunkt"):
Je n'ai pas d'index.js ou de dossier de configuration :(
Vous ne l'avez pas dans votre dossier de projet? (Où vous avez copié le dossier dist)
Vous pouvez cependant supprimer manuellement les barres obliques en éditant votre fichier index.html. Cependant, ce n'est pas optimal.
Oh, je n'ai pas vu que vous utilisiez Vue Ui.
Je n'en sais pas encore assez sur tout cela pour savoir qu'il y a une différence. Je suis très nouveau dans VueJS, donc je me concentre sur les bases. Cela semble étrange comment vous exécutez la tâche de construction, mais cela ne fonctionnerait pas. Un grand merci pour votre aide.
Pas de soucis, nous devons tous commencer quelque part: D Veuillez jeter un œil à la réponse mise à jour. Je n'ai pas essayé cela, mais je suppose que cela fera la même chose que la réponse précédente
Epic ... désolé pour le retard. La construction d'exécution montrant des erreurs, mais VueUI vient de se déclencher et a besoin de la suppression du dossier dist et d'un redémarrage. Votre réponse fonctionne. Merci de l'avoir repéré et de m'avoir aidé. Faites-moi savoir si vous avez besoin de travaux de conception. Seulement heureux de retourner la faveur.
Haha, je suis flatté de l'offre ^^ Ceci est, cependant, StackOverflow, cela signifierait plus pour moi si vous me rendez la faveur en prenant le temps d'aider quelqu'un d'autre si vous voyez une question à laquelle vous pouvez répondre ici :) - Si cette réponse a résolu votre problème, je serais heureux si vous l'avez marqué comme réponse.
Si je n'utilisais pas Vue UI et utilisais plutôt le terminal pour créer un projet Vue fonctionnel, comment se fait-il que je n'ai pas d'index.js ou que je ne trouve pas le dossier de configuration?
Merci @solveTornoe. J'ai lu cette documentation l'autre jour. Je viens de créer un vue.config.js au même niveau que mon fichier package.json. J'avais l'impression que vous avez créé ce fichier avec le terminal, car ce faisant, il peut être lié à une autre logique, mais il semble que ce n'est pas le cas et que vous avez juste besoin de ce fichier js dans votre projet. Peut-être que la documentation devrait dire «créez un nouveau fichier js appelé vue.config et placez-le dans le dossier à côté de votre fichier package.json, mais dix documentation n'est pas la même chose qu'un tutoriel. Merci encore pour votre aide. 4 heures perdues mais j'y suis arrivé.
J'ai utilisé Vue avec une installation Laravel. Peut-être que le dossier / les fichiers de configuration proviennent par défaut de là, je ne suis pas sûr. Je suis content que ça marche pour toi, mon mec.
Si vous utilisez vue , vous pouvez le définir dans votre fichier vue.config.js :
module.exports = {
baseUrl: '',
// rest of your config
};
Il n'y a pas de fichier vue.config.js
Ce n'est pas là par défaut: cli.vuejs.org/config . C'est un fichier facultatif qui vous permet d'appliquer des paramètres qui modifient la configuration de la configuration via vue-cli.
Je ne suis pas sûr de la raison du vote défavorable. C'est exactement le même résultat que la réponse acceptée mais sans utiliser l'interface utilisateur graphique. Si vue-cli est présent, tout ajustement de sa logique peut être effectué dans le fichier de configuration connu, vue.config.js .
Pour résoudre ce problème, vous créez un nouveau fichier js appelé vue.config et le placez dans votre projet au même niveau que votre fichier package.json. Ajoutez ensuite le code suivant à ce nouveau fichier js. La documentation stipule d'inclure la barre oblique «/» mais cela les conservera ainsi que les chemins aux fichiers js et css, etc. seront toujours cassés. Par conséquent, mettez simplement à jour ce code comme ci-dessous. Après quoi, vous devrez réexécuter le processus de construction. npm exécuter la compilation
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? ''
: ''
}
La documentation est vraiment trompeuse et n'a toujours pas été améliorée pour refléter cela, cette réponse a résolu mon problème. Merci @ AI-76
Y a-t-il des erreurs dans la console qui pourraient indiquer que quelque chose manque ou n'est pas chargé?
Utilisez-vous vue-router?
Vous pouvez d'abord utiliser vos versions intégrées sur votre hôte local et rechercher les erreurs. Votre application est-elle hébergée au chemin racine (
http://some-url.com/, et nonhttp://some-url.com/some-custom-path/)?@GenericUser a get chunk-vendors.0e42f062.js et app.1e49a2f5.js sont manquants
@ SølveTornøe Pas encore de note
Je jetterais un œil dans l'onglet de votre réseau et verrais comment les fichiers sont chargés. Je suppose que le chemin emprunté pour charger ces fichiers peut être incorrect. Je reconnais cela comme un problème que j'avais auparavant et la partie
src = / jsest similaire au problème que j'ai eu. En supprimant le premier/, il a résolu les chemins de fichiers.@BeniaminH Bon endroit. J'ai ouvert le fichier après avoir exécuté la tâche de construction, dans le dossier dist, localement et oui, c'est le même écran vide, ce qui élimine les problèmes de compatibilité d'hébergement.
Avez-vous essayé de supprimer le
/du script src:@ SølveTornøe Sur la version hébergée, j'ai inspecté l'élément, édité en HTML, supprimé le / donc c'était src = "js / chunk etc et non src =" / js / chunk. Ensuite, je maintiens ctrl enfoncé, clique sur le lien et je suis dirigé vers ce fichier au lieu de le 404ing. Cependant, comment puis-je modifier cela dans mon application?
En supposant qu'il s'agit de Webpack, vous pouvez modifier ce comportement dans le chemin public: webpack.js. org / guides / public-path . Pour éviter cela, je pense que vous pouvez simplement le définir sur une chaîne vide (par exemple
publicPath: ''). Je pense que la valeur par défaut est/, ce qui se passe ici.veuillez vérifier que la
réponsepeut vous aider