How to use vite in file Protocol

[wChenonly]

Because we are mixed development, embedded h5 page, open using file protocol, and vite must be http protocol to request, how to solve this

[7086cmd]

Emm... Vite build the page via crossorigin to keep safety, and it must run in protocols(not including file). So it might be not ok.(ONLY MY OPINION)

[wChenonly]

Is not very friendly, and now there is still a lot to run in the file protocol.

[Sovai]

I also need to locally run index.html from dist folder. is there any way?

EDIT: found this library here but I prefer not to use lib
https://www.npmjs.com/package/vite-plugin-singlefile

[wChenonly]

There seems to be no other way.

[zhanglongqi]

I tried but no luck, it does not work for my application.

[JuanQP]

Using this plugin will work but images won't load.

Looks like a possible solution would be to include this feature richardtallent/vite-plugin-singlefile#69 (comment) in the plugin, but at this moment, sadly it doesn't exist

[JuanQP]

I've made a very small vite plugin to build the project and directly use the built index.html. It worked with a few small react projects I've been working on. Maybe this can help someone

https://github.com/JuanQP/vite-plugin-make-offline

[maeek]

That's a good step forward thanks a lot! And like you said, it's good for small react projects but I would not recommend that for bigger apps as the build format iife does not support code splitting into multiple chunks, so it only generates one big js file.

[JuanQP]

I've just added that to the caveats section of the readme 👌

[al6x]

Use this:

"scripts": {
    "dev": "vite",
    "build": "vite build && sed -i '' 's/type=\"module\"//g; s/crossorigin//g; s/\\/assets\\//assets\\//g' dist/index.html"
  }

[tatsmaki]

You can create custom plugin to remove crossorigin attribute. This will allow to use http requests in site served by file://

const removeCrossOrigin = () => {
  return {
    name: 'remove-crossorigin-attribute',
    transformIndexHtml(html: string) {
      return html.replace(/crossorigin /g, '');
    },
  };
};

and then

plugins: [removeCrossOrigin()]

[Sovai]

any update please? there are no way to run in file protocol. I am stuck at vue CLI now