Производственная сборка Vue-cli без статических изображений

Question

Я пытаюсь сделать так, чтобы наш логотип отображался в сборке Vue-Cli.

Если я сделаю vue-cli-service serve (запустить webpack dev server), изображения разрешаются (я вижу их в веб-браузере). Однако, если я обслуживаю связанные файлы (используя узел или что-то еще), изображения не разрешаются, несмотря на то, что они находятся в правильной папке. Я вижу на своей вкладке сеть запрос 200 OK для http://localhost:8888/img/logo.fdcc9ca9.png, что означает, что правильный объект с именем файла виден в правильном месте. Я также могу видеть это там, где правильно на моей вкладке источников.

Кроме того, если я проверяю элемент, он выглядит так, что также выглядит правильно:

<img data-v-0242e324="" src="/img/logo.fdcc9ca9.png" alt="logo">

Несмотря на все это, на производственной сборке изображение показывает миниатюру класса HTML "неработающее изображение".

Что не так? Как я могу не показывать миниатюру "испорченного изображения" при сборке? Почему он работает на webpack-dev-server, а не на производстве?

Logo.vue

<template>
  <img src="../img/logo.png" alt="logo">
</template>
<script>
  ...
</script>

vue.config.js

const path = require('path');
const webpack = require('webpack');
module.exports = {
    chainWebpack: config => {
        config.resolve.alias
            .set('@', path.resolve(__dirname, 'client/src'));
        config
            .plugin('provide')
            .use(webpack.ProvidePlugin, [{
                $: 'jquery',
                jquery: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery'
            }]);
        config.plugin("html")
            .tap(args => {
                args[0].template = "./client/index.html"
                return args
            })
    },
    runtimeCompiler: true,
    devServer: {
        proxy: 'http://localhost:8888'
    }
}

package.json

...
    "serve:ui": "vue-cli-service serve client/src/main.js",
    "build:ui": "vue-cli-service build --dest build/public/ client/src/main.js",
...

структура папок, разработка

client/
  src/
    img/
      logo.png
    components/
      Logo.vue

структура папок, выходная сборка

build/
  public/
    css/
    fonts/
    img/
      logo.fcdd9ca9.png
    js/
    index.html

Answer 1

Ответ - наш API был неверно настроен.

Короче говоря, не было никакого обработчика для изображений (или шрифтов). Как указал @aBiscuit, при попытке запроса прямо в моем браузере для любых URL-адресов моего изображения был возвращен index.html, который является резервным API для запросов стекового файла, который он не понимает.

Без нашего кода это бесполезно, но добавление следующего к нашей обработке маршрута решило проблему:

routes.ts

router.get('/img/:file', async (ctx, next) => {
    await next();
    await send(ctx, `build/public/img/${ctx.params.file}`);
});