Is it possible to deploy Vue and Vite without a server to run?

Question

I have a very particular question, cause I wish to create a webpage that works without a server, and I'm trying to do it using vite, my whole project is using vue + vite.

if I try to use "vite build" command, the page deploy as blank, and the only way I can see the page is if I use "vite preview".

would it be possible, somehow, to load the content of the html page using vite, without needing the "vite preview"? just double clicking on index.html

Answer 1

Using vue-cli, this is possible by setting the publicPath in the vue.config.js file to an empty string, see: https://cli.vuejs.org/config/#publicpath I've personally only used it with Vue 2, but from what I read online it should also be possible with Vue 3, if you're okay with switching to vue-cli.

Using Vite, I found this question and answer which shows a way by bundling all the scripts, css and images into a single file: How to open a static website in localhost but generated with Vite and without running a server?

I did try that and it mostly works, but not currently for svg files which I use a lot of in my application. It might work fine for your use-case.

I did also need to add "type": "module", in my package.json to get rid of an error saying

"Error [ERR_REQUIRE_ESM]: require() of ES Module /path/to/dist/index.js from /path/to/vite.config.inlined.ts not supported."

Answer 2

If you open your page simply as an index.html, you will be limited regarding some API calls and alike. Nowadays, you will need a light server to be hosting it via a simple vite preview as you saw. This is mainly because the files are being worked with bundlers like Webpack and Vite.

I'm not sure that there is a way of loading the whole thing with just an index.html because files like .vue are not natively supported, you need a specific loader.

One simple solution would be to use Vue as a CDN, but it will limit your DX experience regarding SFC files, but you will be able to use Vue into a regular index.html file.
PS: your performance will also be worse overall (because of the required network requests).

If you want something really lightweight, you could of course also use petite-vue, maybe more suited towards super simple projects with a tiny need of reactivity.

I still recommend using something like Netlify or Vercel, to host your static site for free + having the whole Vue experience thanks to a server running vite preview for you.