VueJS развернутая производственная сборка с поврежденными изображениями png

Question

Я запустил npm run build, и это создает папку dist с активами stati c, такими как изображения. Я использую режим истории на vue роутере.

Вот как выглядит HTML для изображения:

Вот как выглядит папка dist:

Теперь после развертывания сайта изображения не работают:

Тем не менее, img sr c является правильным:

Так в чем здесь проблема?

Answer 1

Я собираюсь go выйти из строя и предположить, что проблема связана с вашими маршрутами и что относительные пути не работают из маршрутов.

Если ваше приложение отображается на root directory /, относительный путь к изображению будет работать, но, поскольку (и это предположительно) ваш маршрут меняет текущий путь на что-то вроде /sales, относительный путь больше не работает.

Вы можете исправить это, просто убедившись, что используете относительный путь.

Например, если вы используете сгенерированный проект vue -cli-3, проверьте файл vue.config.js и убедитесь, что у вас не установлен publicPath, поскольку по умолчанию он /.

module.exports = {
  publicPath: "./", // <= this will use relative path
};