Ionic Vuejs coming blank after ionic build

Hello Everyone,

I am new to Ionic vuejs, I have developed an Ionic vuejs project without typescript and just js, and now I want to deploy this project to the FTP server. I did run an ionic build and can see the dist folder and inside contents of it. My question is that I am also using Tomcat which is on the same FTP server, where my Springboot backend is deployed. So, I need to understand where I should place the contents of the dist folder on the server, and if there are any changes to be done in index.html or any changes to be done in any file in the dist folder before deploying it to the server and how to access the project when deployed, can anyone share some doc or sample project sort of thing to help me understand better with the steps of deployment.

Also, I uploaded the dist folder to the server, but the website is coming as blank, I am not sure why it is causing that. Need help.

I appreciate it, thanks.

I have followed the video for the initial setup.

Uploading the dist folder should do the trick. Sounds like it’s maybe a server configuration issue. Typically the server should serve the index.html by default.

The warning “Some chunks are larger than 500 kBs after minification” isn’t causing this. It is just a warning that performance might be impacted. For a native app, this doesn’t matter because all the files are being served directly from the phone. When deploying on a server, it can affect the user depending on their internet speed to download the chunks.

What are the changes to be done in dist folder after ionic build, currently, I want to place the dist folder contents to the subfolder in the root, for example, say dist folder contents are in path contains dist contents and not dist folder) , then are there any changes required in index.html?

I made changes to the index.html, I made the baseurl point to “/parentfolder/”. Also, all the file path under the assets folder in index.html , I added /parentfolder/ in the beginning of the path. Now when I open js / css or any image file via the url, it opens an image but when I do , it opens a black page

Checking the console, it does not show any errors in the network tab or console just a blank white screen.

If I place the dist folder contents in the root, , it opens the website.

Also, is there any specific command in ionic build to pack it as a website. I am not using app , so no android or ios platforms are required for now.


This article might help - Deploying Vue apps in subdirectory - DEV Community.

Thanks, I will go through it, in the meantime, are you aware of any config to do for the problem below:

I uploaded to server my project. The website available here: When I type in the address field “” the website works fine. When I refresh the page I get an error message. It also happens when I type in the address field the exact route such as “You are being redirected...” for example. It happens with every route that I try. Error message Are :

"Not Found The requested URL was not found on this server.

Thanks once again.

It sounds like you don’t have URL rewriting set up. By default, a URL like the server is going to look for that exact path.

Okay, I will create a .htaccess file and place it on the root of server, I believe rewriting of the url will take place from the code in the .htaccess file.


Hello, Do you have blogs that helps in URL rewriting set up? I am using apache server, Ionic vuejs and springboot backend. Thanks

I don’t. I stopped using Apache many years ago. Google should be able to help :smile: