How to run index.html from dist folder?

[Sovai]

Hi, I want to be able to run index.html from dist folder (my project is to load the dist folder as static webview on the mobile app).
I am able to run index.html from dist folder with vue cli webpack by set vue-router history like this

const router = createRouter({
  history: createWebHistory("/#/"),
)}

However, with Vite I am not able to run index.html as it shows CORS error like this

Is there any configuration I'm missing? thanks in advanced for your help

[zheeeng]

You could run an http/https server to host dist. Look at this reference https://vitejs.dev/guide/static-deploy.html for more info.

[Sovai]

Hi, thanks for your answer
I cannot use HTTP protocol since I need to embed the dist folder in mobile app

[zheeeng]

Maybe you need to find some ways to produce a single bundle HTML file with the inline scripts and stylesheets.

[alfadormx]

Hello, have you found a solution for your issue? I am building the solution as a static site that I want to run directly on the browser as a local file, not through a web server. How can I achieve this?
Thanks for your kind reply.

[alfadormx]

I have found a 'solution' that works for me at least. What I do is I generate a single file where the css and js code are embedded onto the same html file. I did this with the help of vite-plugin-singlefile dev dependency. Then I added it onto my vite.config.ts as follows:

import { defineConfig } from 'vite'
import { viteSingleFile } from "vite-plugin-singlefile"
import react from '@vitejs/plugin-react-swc'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), viteSingleFile()],
})

Then running yarn build will generate the single html file.

[sanjarDev1]

Hi I tried this way but it didn't work

[Patpatolino]

Worked perfectly for me. Just installed the plugin, put it inside the config, run build and voila i can just open the index.html of the dist folder without any cors errors.

Thanks!

[nguyengochie]

it worked for me
thanks!!!

[sanjaysoalnki2000]

It is not working with 'BrowserRouter', if I used 'HashRouter' it would work.

vite.config.js

import react from '@vitejs/plugin-react'
import { viteSingleFile } from "vite-plugin-singlefile"
export default defineConfig({
  plugins: [react(),viteSingleFile()],
  base: '/students/',
  })

App.jsx

<BrowserRouter basename='/students/'>
          ......
 </BrowserRouter>

[isrark005]

npm install -g serve
serve -s dist
This worked for me