[SOLVED] How to package a Vue Single File component with Vite to load it via HTTPS?

How to package a Vue Single File component with Vite to load it via HTTPS?

I'm trying to create a compiled an packaged version of my Vue Single File component to distribute and dynamically load it via HTTP.

I found this article from Markus Oberlehner that uses Vue CLI v3 with the following command:

npx vue-cli-service build --target lib --formats umd-min --no-clean --dest server/components/MyComponent --name "MyComponent.[chunkhash]" server/components/MyComponent/MyComponent.vue

It seems to work fine, however, I would like to use Vite instead. Is that possible? Which is the equivalent command?

Solution

Author of the original article here.

I recommend you look into Module Federation. When I wrote the original article, it did not exist yet. Nowadays, I'd 100% go for Module Federation instead of rolling my own.

There is also a Vite plugin for it: https://github.com/originjs/vite-plugin-federation