I dont know if I'm doint it wrong here, but I started a vanilla.js project with vite, I did my code, and everything is working with: npm run dev (which runs vite command).
But when I run npm run build and I open /dist/index.html the page is not working.
Probably I'm doing something wrong.
I know that when I run npm run build && npm run preview it works. But I'm trying to make it work by only opening the index.html file, because AFAIK, that's the only way I could host it on Github pages.
I dont know if I'm doint it wrong here, but I started a vanilla.js project with vite, I did my code, and everything is working with: npm run dev (which runs vite command).
But when I run npm run build and I open /dist/index.html the page is not working.
Probably I'm doing something wrong.
I know that when I run npm run build && npm run preview it works. But I'm trying to make it work by only opening the index.html file, because AFAIK, that's the only way I could host it on Github pages.
4 Answers
Reset to default 11I 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
Go through below link for details:
https://vue-land.github.io/faq/blank-page-in-production#:~:text=You%20need%20to%20run%20vite,wrong%20with%20a%20production%20environment.
vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'node:url'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
// base: './', // works, but can clash with createWebHistory
// base: '/', // if the app is in root directory
base: '/webamy-app/', // if the app is in sub path
})
index.js
...
const router = createRouter({
// history: createWebHistory(),
history: createWebHistory(import.meta.env.BASE_URL),
routes,
})
If your site is deployed to https://example.com/webamy-app/ Just type as below in Web URL (exclude index.html)
https://example.com/webamy-app/
If your app is in the root path:
https://example.com/
I added this at vite.config.js and now it works!
import { defineConfig } from 'vite';
export default defineConfig({
base: '/roulette-simulation/'
});
index.html. That's whatnpm run previewdoes for you. You don't need to be able to open yourindex.htmlwithout a server for it to run on GitHub pages. – tony19 Commented May 1, 2022 at 23:08