Build Vue Projects as WAR

In some rare use case, how do you deploy your Vue frontend on a server implemented for Java?

According to Vue’s official deployment general guidelines:
If you are using Vue CLI along with a backend framework that handles static assets as part of its deployment, all you need to do is make sure Vue CLI generates the built files in the correct location, and then follow the deployment instruction of your backend framework.

If you are developing your frontend app separately from your backend — i.e. your backend exposes an API for your frontend to talk to, then your frontend is essentially a purely static app. You can deploy the built content in the dist directory to any static file server, but make sure to set the correct publicPath.

Let’s talk about the latter case when your frontend is a static app, but the problem is your backend is in Java, moreover, your deployment server was implemented for Java( e.g. Wildfly/JBoss) and you can only deploy .war ( (Web Application Archive) files on it.

You can get away with the following workarounds:

Workaround #1 Using Java IDE
Set the output directory of Vue dist to the WebContents/Static folder of a blank Maven Java project and package it as .war using IDE of choice.