Vue3 build is showing blank page

my vue3 build is showing blank page in my browser when i run it in my wamp server. I cant figure what did i miss, I’m using vue router and vuex in my project. Is the error occurring because of config issue ???

Right click on the blank page, choose the “Inspect” option (or whatever it’s called in your browser), and then go to the Console tab. What error is logged there?

There is no error in the browser “console”. my favicon and other css and js files are loading but the div id=“app” is still empty in the element tab.But if i run the dist folder in npm serve its working, but its is not working in the php wamp server. i have router in my project also should i need to make any configuration in order that work in production ??

Do you upload the content in the dist folder to the root folder on the WAMP server? I.e. do you access index.html with /index.html? Otherwise you need to set the publicPath option accordingly.

Yeah I’m uploading my content into a root folder on WAMP server, but what kinda publicPath do i need to configure. I’ve already set the public path in my vue config to " " empty string and build it for production. Please help me with this bruh :pray::disappointed_relieved:

The first image is a build which im running without a server, just locally

This is a image where i run the build index.html with a server localhost

Opening index.html using the file protocol won’t work, because it contains absolute paths (paths from the root) to the JS and CSS files. So that’s why the first image is a blank screen.

The second image is a blank screen because index.html is not in the root folder of the WAMP server. You can see in the URL bar that the path is /dist/index.html. You need to upload the content in the dist folder to the root folder on the WAMP server. Otherwise, when you upload the entire dist folder to the root folder on the WAMP server, you need to set publicPath to '/dist/'.

1 Like

What are you expecting to see on your page? In the second image it looks like your assets are loading just fine and in the middle I see a box with “Window Snip”.

As @PeppeL-G said, the url looks off and you should defintely be setting the correct publicPath, but you also need to make sure your WAMP server configuration is correct. Have you set it to forward all requests to your index.html?

It worked for me, i created a root folder in my WAMP and added the contents in my dist folder and it worked.:star_struck:

Try with this to test static files:
serve -g dist