web-dev-qa-db-fra.com

Déployer VueJS App dans un sous-répertoire

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?

webpackvue.jsvuejs2
13
Harry

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.

Mettre à jour:

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

18
Matt

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.

16
jedik

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)

0
Franz Anton Mesmer