Как исправить пути к фоновым изображениям при развертывании приложения vue на gh-страницах?

Question

Я развертываю мое приложение vue на gh-pages и сталкиваюсь с проблемой с загрузкой фоновых изображений.

Вот структура моего проекта

И здесь ссылка на мой проект на gh-страницах в реальном времени.
Вы можете видеть, что изображения из тегов img загружаются, а также загружаются файлы svg, но фоновые изображения, которыене svg нет (все мои фоновые изображения находятся в папке img).

Я вижу в консоли, какие пути перепутаны - они должны быть static/img/footer.88ceaa2.png, но вместо этого они static/css/static/img/footer.88ceaa2.png

Должны ли пути к фонам отличаться в моих компонентах или это что-то в моем конфигурационном файле?Любая помощь будет высоко ценится.

Ссылка на репо

Answer 1

Просто используйте новую версию vue-cli .

Установите :

$ npm install -g @vue/cli
--or--
$ yarn global add @vue/cli

Создайте новый проект:

$ vue create my-project

перейдите в my-project и удалите папку src.Скопируйте папку src из своего проекта (shelder) и вставьте ее в папку my-project.

Запустите проект :

$ npm run serve
--or--
$ yarn serve

Build:

$ npm run build
--or--
$ yarn build

Answer 2

У меня та же проблема с Nuxt, и есть способ обойти стиль связывания, как встроенный

:style="{ backgroundImage: 'url(' + require('@/assets/imgs/assets/img/header.png') + ')' }"