[Vuejs]-Cannot access vue.js frontend when running npm build (frontend-maven-plugin and spring-boot backend)

Here are some things to consider, I don’t know if any of them will help, but we never know:

On the backend:

• Check again your backend pom.xml and see if the required dependencies are properly in it
• Make sure you don’t have a server.servlet.contextPath=/api in your application.properties
• Make sure the application.properties contains server.port=8080 (or just don’t this property, the default port is 8080).
• I don’t think the GreetingController is useful… The purpose of the @RequestMapping you specified on the method is to avoid your controller to take over when the client refreshes his page and the browser sends a /toto"… If you don’t have this rule, your server will try to execute the /toto route, which it doesn’t know of… Try either removing the @RequestMapping on your controller class, or delete the class for now…

On the frontend:

• You said your application were working when you were doing the npm run serve command and trying to access http://localhost:8080/… which is okay and weird. Using this command is to allow you to have a frontend server, faster to develop your frontend and your components. Here is my vue.config.js, see if you get the same, or something close:

module.exports = {
    'outputDir': 'target/dist',
    'assetsDir': 'static',
    'devServer': {
        'port': 8088,
        'proxy': {
            '/api': {
                'target': 'http://localhost:8080',
                'ws': true,
                'changeOrigin': true
            }
        }
    },
    'transpileDependencies': [
        'vuetify'
    ]
}

As you can see, my frontend dev server is accessible through the port 8088=> http://localhost:8088… Besides, I have the 'outputDir': 'target/dist',, making sure that my js files are written into the proper directory.

Here is what you can do to make sure your frontend and backend files are “connected”: (in the webapp folder)

1. mvn clean
2. Delete the folder webapp-backend/src/main/resources/public and everything in it.
3. If you have one, delete the webapp-backend/src/main/resources/index.html (we never know)
4. Execute mvn install
5. Check the webapp-backend/src/main/resources. You should have a new public folder and everything in it (index.html, static/)

That should do the trick.

If you have the public folder created you are still experiencing the blank page issue, then I don’t what else you can look for.

But give it a go !