7

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

isherwood
  • 58,414
  • 16
  • 114
  • 157
Emilly Monteiro de Souza
  • 105
  • 1
  • 4
  • 1
    you want a file that you download, double-click and it shows all the content that would show when it's hosted?? – h0p3zZ Apr 25 '22 at 15:54
  • I want to double-click on index.html on dist folder and then it shows all the content from my webpage, but vite is making the page blank and throwing some errors. – Emilly Monteiro de Souza Apr 25 '22 at 15:58
  • as a single-file? – h0p3zZ Apr 25 '22 at 16:01
  • It doesn't need to be a single-file, I just want to open the Index.html and it has to show me all the content that I've created using vue – Emilly Monteiro de Souza Apr 25 '22 at 16:04
  • This is how it look's like when I use "vite build" and try to execute the [index.html](https://prnt.sc/wLBCrENnlwTc). I want it to show like [this](https://prnt.sc/GjYh6pa0rkkK) But I don't even know if it's possible – Emilly Monteiro de Souza Apr 25 '22 at 16:11
  • It's possible with Vue 3 is as easy as it was with Vue 2. As others have pointed out, by setting the public path to an empty string or ./ Vite is now the recommended way anyway. See more here https://cli.vuejs.org/guide/deployment.html#previewing-locally and here https://vuejs.org/guide/scaling-up/ssr.html – NewUser2 Oct 04 '22 at 03:04
  • By the way, double clicking the file itself would open it on `file` protocol, and these are meant to be served over `http` protocol, so you will most likely need a server anyway, not that you can't use it without a server, you probably can by configuring the paths however it's still recommend to use a server, especially for production applications, it will save you a lot of headache, plus you won't be able to do much with static site generation aka SSG. – NewUser2 Oct 04 '22 at 03:22

2 Answers2

8

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."

Lizzan
  • 1,032
  • 15
  • 32
  • A lot of work for "just" that, well found tho. – kissu Apr 28 '22 at 12:06
  • I agree @kissu, I wish it were much easier! Sometimes you have to jump through all the hoops though, such as when you have customers that need to run your app on a computer without network access and don't allow executable files/webservers to run locally. – Lizzan Apr 28 '22 at 12:15
  • 1
    @kissu Unfortunately I mostly wind up with such customers. *facepalm* Since they don't allow executables, a web app is the only way to go. Some day we'll have to tell them that they can't have it both ways, unfortunately. – Lizzan Apr 28 '22 at 12:23
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.

kissu
  • 40,416
  • 14
  • 65
  • 133