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

[joswhite]

@JuanQP Thanks so much for the plugin! I just got it working in the new version of Vite released last week, Vite 8. It didn't require any changes to the plugin, which is great news! I copied the plugin code and used it locally, with two minor changes (renaming rollupOptions to rolldownOptions and adding a define for import.meta to get past the warning Vite generates otherwise):

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export function makeOffline() {
  return {
    name: 'iife',
    apply: 'build',
    enforce: 'post',
    transformIndexHtml(html) {
      return html.replace(' type="module" crossorigin ', ' defer ');
    },
  };
}

export default defineConfig({
  plugins: [react(), makeOffline()],
  base: "./",
  define: { 'import.meta': {} },
  build: {
     rolldownOptions: {
        output: {
           format: "iife"
        }
     }
  ...
  }
});

Caveat: It seems the IIFE format can be pretty picky about imports. Before using this plugin, I was using Material UI 5 with Vite 7. I upgraded to Vite 8, which necessitated turning on the legacy.inconsistentCjsInterop option discussed here. Then I tried to output IIFE using the code above and got this error when I opened my app in the web browser without using a server: "Uncaught TypeError: Yh.default is not a function". The error was thrown when node_modules/@mui/material/styles/styled.js, which is part of Material UI and used by the <Toolbar> component I was rendering, tried to import createStyled from node_modules/@mui/system/createStyled.js. I thought, this looks the opposite of the error I got before I turned on legacy.inconsistentCjsInterop (That error was "Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.") Unfortunately, turning it off did not fix the error, it only added my prior error back.

I upgraded to Material UI 6, which fixed the issue and now I can generate IIFE format and open the app in my web browser without using a server.

Note: It works fine whether I have legacy.inconsistentCjsInterop turned off or on. I went ahead and turned it off.

If you're having these sorts of issues, don't give up hope! I would try upgrading the third-party library you use, or using a different format or version.