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

Allan спросил: 28 апреля 2018 в 09:03 в: github-pages

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

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

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

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

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

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


2 ответа

Есть решение
ittus ответил: 28 апреля 2018 в 11:19

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

:style="{ backgroundImage: 'url(' + require('@/assets/imgs/assets/img/header.png') + ')' }"
Mesut ответил: 28 апреля 2018 в 11:59

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

Установите:

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

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

$ vue create my-project

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

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

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

Постройте

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