Ошибка сборки Heroku vue-loader

Когда я пытаюсь развернуть свое приложение Vue на Heroku, я получаю следующую ошибку сборки, которую раньше не получал:

ERROR in ./~/vue-loader/lib/template-compiler?{"id":"data-v-10bd33eb","hasScoped":false,"transformToRequire":{"video":"src","source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/About.vue
       Module not found: Error: Can't resolve '../assets/Noam.jpg' in '/tmp/build_4e0206e4d9f7ce1235a91f8c7dbd5035/src/components'
        @ ./~/vue-loader/lib/template-compiler?{"id":"data-v-10bd33eb","hasScoped":false,"transformToRequire":{"video":"src","source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/About.vue 2:1080-1109
        @ ./src/components/About.vue
        @ ./src/router/index.js
        @ ./src/main.js

         Build failed with errors.

       npm ERR! code ELIFECYCLE
       npm ERR! errno 1
       npm ERR! [email protected] build: `node build/build.js`

Ошибка заключается только в жалобе на одно изображение (Noam.jpg), которое имеет те же размеры и свойства, что и другие. Файл находится в папке assets, которая находится в том же каталоге, что и components. Когда я запускаю сервер и захожу на сайт, изображение загружается, но сбой происходит только в сборке Heroku.

About.vue

<template>
  <div id = "about">
    <br>
    <div id = "header">
      <h1>Who we are</h1>
    </div>
    <ul>
      <li><figure><img src = "../assets/Paul.jpg"><figcaption>Paul Attara</figcaption></figure></li>
      <li><figure><img src = "../assets/Lucas.jpg"><figcaption>Lucas Bellido</figcaption></figure></li>
      <li><figure><img src = "../assets/Arielle.jpg"><figcaption>Arielle Lasry</figcaption></figure></li>
    </ul>
    <ul>
      <li><figure><img src = "../assets/Kamy.jpg"><figcaption>Kamy Moussavi</figcaption></figure></li>
      <li><figure><img src = "../assets/Eden.jpg"><figcaption>Eden Ovadia</figcaption></figure></li>
      <li><figure><img src = "../assets/Noam.jpg"><figcaption>Noam Suissa</figcaption></figure></li>
    </ul>
    <ul>
      <router-link to = "/" id = "back">Back to Home</router-link>
    </ul>
  </div>
</template>

Когда это происходит со мной, я всегда проверяю github, чтобы убедиться, что я действительно проверил файл ...

Jim B. 25.11.2018 01:18

@JimB. Он там с расширением JPG с большой буквы

Noam Suissa 25.11.2018 01:21

Дай угадаю, вы разрабатываете на Mac?

Jim B. 25.11.2018 01:24

@JimB. Да, лол. Удивительный! Это сработало. Спасибо!

Noam Suissa 25.11.2018 01:24

Я был обожжен этим 100 раз.

Jim B. 25.11.2018 01:25

Vue-loader есть у вас в devdependencies? как я знаю, heroku не будет устанавливать зависимости разработчика по умолчанию. он обрабатывается переменной окружения NPM_CONFIG_PRODUCTION. Попробуй установить на false.

Peter Kota 04.12.2018 15:41
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
6
97
0

Другие вопросы по теме