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.
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
},
});
...
},
});