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

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

0 голосов
/ 24 октября 2018

Я пытаюсь, чтобы наш логотип показывался в сборке 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

1 Ответ

0 голосов
/ 24 октября 2018

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

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

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

rout.ts 

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