javascript - L'image référencée dans Vue ne se charge pas lorsqu'elle est déployée sur le serveur

Question

Structure du répertoire :

Code :

<img src="./title.png" />

Il peut être chargé normalement lors de son exécution sur le serveur local,
Mais il ne peut pas être chargé lorsqu'il est placé sur le serveur (tomcat). Le projet est déployé dans le répertoire webapp/myproject/,
Le chemin de l'image qui doit être demandé sur le serveur. le serveur est http://1.1.1.1:8080/ myproject...
Mais le chemin de l'image réellement demandé est http://1.1.1.1:8080/static/im...
Comment écrire le chemin de l'image dans vue comme le répertoire courant au lieu du répertoire racine du serveur

Answer 1

J'ai déjà rencontré ce problème et il a été compilé dans un document. Ce que vous devez modifier, c'est la configuration du webpack, puis le reconditionner

.

Answer 2

J'ai également rencontré cela. Lorsqu'il est placé sur le serveur, le chemin de l'image doit à ce moment être un chemin absolu. Lorsqu'il est local, appuyez sur le chemin <img src="./title.png" /> . Lorsqu'il est placé sur le serveur, il s'agit de < ;img src="/myproject/static/img/title.45ae5f4.png" />. Bien sûr, la méthode ci-dessus est meilleure

Answer 3

Si vous utilisez des échafaudages, veuillez vous familiariser avec les utilisations de plusieurs JS dans la configuration, notamment index.js

build: {
        env: require('./prod.env'),
        index: path.resolve(__dirname, '../dist/index.html'),
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static', // 附件资源引用子目录
        assetsPublicPath: '项目正式地址', // 服务器资源引用根目录
        productionSourceMap: true,
    }