Почему после сборки в Nuxt 3 не открываются новые изображения?

Почему новые изображения, добавленные после сборки приложения Nuxt 3, отображают ошибку 404, и как это можно исправить, учитывая что в режиме разработки все работает нормально?
  • 15 декабря 2023 г. 12:07
Ответы на вопрос 2
Возможно, проблема в том, что при сборке Nuxt 3 изображения копируются в папку `dist`, и пути к этим изображениям в шаблонах и стилях не обновляются автоматически. 

Для исправления этой проблемы вам нужно использовать специальный плагин, который будет обновлять пути к изображениям после сборки. Например, вы можете использовать плагин `copy-webpack-plugin`.

Установите `copy-webpack-plugin` с помощью npm или yarn:

```
npm install copy-webpack-plugin --save-dev
```

После установки создайте файл `nuxt.config.js` рядом с вашим проектом. В этом файле добавьте следующий код:

```javascript
const CopyPlugin = require('copy-webpack-plugin')

export default {
  // ...
  build: {
    extend(config) {
      config.plugins.push(
        new CopyPlugin({
          patterns: [
            {
              from: '**/*',
              to: 'assets',
              context: 'static'
            }
          ]
        })
      )
    }
  }
}
```

Данный код настроит плагин `copy-webpack-plugin` для копирования всех файлов из папки `static` в папку `dist/assets`. Теперь при сборке новые изображения будут правильно копироваться и отображаться в вашем приложении.

Обратите внимание, что если вы используете другую структуру папок или имена для ваших изображений, вам нужно будет изменить пути и настройки в коде выше соответственно.
Картинки надо класть не в public, а в assets, потому что билд забирает их оттуда и компилит в рабочую версию. Само собой они у вас на деве работают, потому что путь прямой прописан, а после билда приложение их не находит, потому что их нет в public. Попробуйте переместить в assets а потом сделать билд. И смотрите пути правильно ли прописаны.
Похожие вопросы