Vue3 vite build shows blank page - please help

[sodhigurpreetsingh]

Hello,

i have vue3 + vite custom element deployment. When i build the app using

npm run build
The built app shows a blank page.

The app runs perfectly fine in the dev mode.

I have tried countless hours trying to troubleshoot this, if someone can help please advise

Here is the link to my code deployed on stackblitz

https://stackblitz.com/edit/vitejs-vite-rdzq9f

Thanks in advance

[chenxch]

After compilation, it can be accessed normally through the preview command. I think you should check your deployment method.

[sodhigurpreetsingh]

with npm run preview, the app shows ok but does not work if i just did npm run build and pushed to a web server for previewing the app but it goes blank... no errors nothing just simply blank

can you please see if there is anything in vite config that is messed up?

Thanks

[chenxch]

This depends on the configuration of your server directory and access path. The resource files built by default are relative addresses. You can check whether it is a resource 404 in the console.

[sodhigurpreetsingh]

yes i have checked those several times they are correct the script module is relative like this

<script type="module" crossorigin src="./assets/index-197bebf9.js"></script>

i have viewed the source and checked as well it is accessible..

[chenxch]

Then your console doesn't have any error message?

[sodhigurpreetsingh]

You are absolutely right, the path to assets is relative but the files it link to are not the are being accessed from root directory as /

sorry my bad, i had spent countless hours on this stupid mistake

Thanks very very very much for your help.

[chenxch]

Congratulations.

[sodhigurpreetsingh]

So anyone facing this issue, please remember to put your app in the root of your web server directory to make it work correctly..