Vue CLI build target lib -> externalize images (Vue 3)

Question

I have a question regarding vue-cli's target build lib. I have an app that produces a custom element following this documentation. Check:

/* ce.js */
import { defineCustomElement } from 'vue';
import Chat from './App.ce.vue';
const element = defineCustomElement(Chat);
customElements.define('chat-widget', element);

The build command looks as follows:

/* package.json */
"build-wc": "vue-cli-service build --target lib --inline-vue --name chat-widget --dest ./wwwroot src/ce.js"

This is actually working all fine but not exactly how i want it. My images are all generated inline which totally bloats my generated umd file. Also when i put my app on a server it refuses to load the images when inline because of Content-Security-Policy issues (another discussion).

Is there a way to tell webpack / vue-cli that I want my images in separate folder? Preferably in the destination folder under /img.

Answer 1

Figured it out! Just set the maxSize of the image parser to very low and the images will be dropped in /img in the output folder. Cheers!

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
    ...
    chainWebpack: (config) => {
        ...
        config.module.rule("images").set("parser", {
            dataUrlCondition: {
                maxSize: 4 * 1024, // 4KiB
            },
        });
        ...
    },
});