Tengo una pregunta sobre la biblioteca de compilación de destino de vue-cli. Tengo una aplicación que produce un elemento personalizado siguiendo esta documentación. Controlar:
/* ce.js */ import { defineCustomElement } from 'vue'; import Chat from './App.ce.vue'; const element = defineCustomElement(Chat); customElements.define('chat-widget', element);El comando de compilación tiene el siguiente aspecto:
/* package.json */ "build-wc": "vue-cli-service build --target lib --inline-vue --name chat-widget --dest ./wwwroot src/ce.js"En realidad, esto funciona bien, pero no exactamente como lo quiero. Todas mis imágenes se generan en línea, lo que infla por completo mi archivo umd generado. Además, cuando pongo mi aplicación en un servidor, se niega a cargar las imágenes cuando está en línea debido a problemas de política de seguridad de contenido (otra discusión).
¿Hay alguna manera de decirle a webpack/vue-cli que quiero mis imágenes en una carpeta separada? Preferiblemente en la carpeta de destino bajo /img.
¡Lo averigué! Simplemente configure el maxSize del analizador de imágenes en muy bajo y las imágenes se colocarán en /img en la carpeta de salida. ¡Salud!
const { defineConfig } = require("@vue/cli-service"); module.exports = defineConfig({ ... chainWebpack: (config) => { ... config.module.rule("images").set("parser", { dataUrlCondition: { maxSize: 4 * 1024, // 4KiB }, }); ... }, });