Je rencontre des problèmes pour déployer une application Vue JS créée à l'aide de Webpack CLi.
Si téléchargé dans un répertoire racine, tout se passe bien, mais dans un sous-dossier, tous les liens sont rompus.
J'ai ajouté une base href:
<base href="/dist/">
Et les scripts se chargent, mais tous les chemins d'accès créés par Webpack sont cassés. Les images et les polices ne se chargent pas car elles pointent vers le répertoire racine.
Quelqu'un peut-il aider s'il vous plait?
En supposant que vous utilisiez le modèle webpack de vue-cli, vous devez éditer la propriété assetsPublicPath
dans config/index.js - remarque qu'il en existe un pour build
et pour dev
.
Consultez Gestion des actifs statiques section dans la documentation pour plus d'informations.
Lien plus récent pour les utilisateurs CLI v3 +: https://cli.vuejs.org/guide/html-and-static-assets.html
Notez que la propriété s'appelle simplement publicPath
Pour Vue CLI 3, c'est assez simple.
Editez votre vue.config.js
(s'il n'y en a pas, créez-le dans le répertoire racine du projet) et ajoutez les lignes suivantes:
module.exports = {
baseUrl: "./"
};
Ou quel que soit le sous-répertoire que vous voulez.
Vous pouvez également décider selon NODE_ENV
. Voir le docs .
module.exports = {
baseUrl: process.env.NODE_ENV === 'production'
? '/production-sub-path/'
: '/'
}
METTRE &AGRAVE; JOUR
Comme mentionné dans les commentaires ci-dessous, pour Vue CLI 3.3+, utilisez la propriété publicPath
au lieu de baseUrl
.
Si vous avez installé votre application avec
npm install -g @vue/cli
vue ui
alors vous devriez créer le fichier vue.config.js dans le dossier du projet principal (où package.json est)