I added this on my vite.config.js.
import { defineConfig } from 'vite';
export default defineConfig({
base: './'
});It happens becouse our navigator doesnt recognize the path /heres-the-file-or-paths so i needed to add the ./ at the beginning of our path when are importing .js and .css files. The same for icons and others.
This makes that the build process ends with and index.html like this with our imports paths working. href="./the-rest-of-the-path-here"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="./vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
<script type="module" crossorigin src="./assets/index.b3824f6c.js"></script>
<link rel="stylesheet" href="./assets/index.3fce1f81.css">
</head>
<body>
<div id="root"></div>
</body>
</html>I hope this can help you.
Answer from Joel Orzet on Stack OverflowI added this on my vite.config.js.
import { defineConfig } from 'vite';
export default defineConfig({
base: './'
});It happens becouse our navigator doesnt recognize the path /heres-the-file-or-paths so i needed to add the ./ at the beginning of our path when are importing .js and .css files. The same for icons and others.
This makes that the build process ends with and index.html like this with our imports paths working. href="./the-rest-of-the-path-here"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="./vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
<script type="module" crossorigin src="./assets/index.b3824f6c.js"></script>
<link rel="stylesheet" href="./assets/index.3fce1f81.css">
</head>
<body>
<div id="root"></div>
</body>
</html>I hope this can help you.
In my case i think my build files are corrupted so i re build entire project using npm run build and then i started preview mode npm run preview
`vite preview` does not start server
'Cannot get /' on a TanStack Start project in vite preview mode
vite preview does not work
Within a dev container using Docker 26, `vite dev` or `vite preview` cannot be accessed from the host
I'm having an issue where both vite dev and vite preview are working as expected. When I do a vite build everything seems fine, all my bundles are properly created and referenced properly. I see no errors when I attempt to view the page using live server but get just a blank page.
I'm using vuetify 3 with page routing and a pinia store but it's a pretty simple app and using the default vite.config.js settings.
Has anyone else experienced this issue? Any idea how I can even troubleshoot if I'm not seeing any errors in console?
I have a problem that only shows up in production. When I attempt to track the problem down using Chrome Dev Tools it is hard for me because all the code has been mashed together and obfuscated by Vite (or Rollup or whatever.)
Is there any way to build my app for production without all the crazy camouflage?
npm run dev (or vite) starts a local web server with Hot Module Replacement for development, and will automatically change when code changes
npm run build (or vite build) builds the project, and outputs to the folder ./dist
npm run preview (or vite preview) start a local web server that serves the built solution from ./dist for previewing
Beware
You need to run
buildbeforepreview.Previewwill always preview the latest build, and will not update automatically when code changes.
Accordig to vite documentation itself:
vite#Start Vite dev server in the current directory. Will enter the watch mode in development environment and run mode in CI automatically.
...
vite preview#Locally preview production build.
In short words, vite is for running a dev server on your computer, while vite preview is for running an already built app as a preview of the production build.