Springboot integrates vue



This article mainly studies how to integrate vue in springboot Project.


  • For a new springboot web project, static and templates folders will be generated by default in the resources directory.
  • The templates file is used to store templates for back-end rendering. here we use the method of separating front and back ends, so this folder is useless.
  • Static folders are places where static files are stored.


            <!-- mvn process-resources -->
                        <id>copy Vue.js frontend content</id>
  • Here, we used the maven-resources-plugin plug-in to copy the files under the dist folder after npm run build of vue project to the static directory.
  • Here, let’s assume that the vue project is called vue-demo, under the root directory of this springboot project
  • For vue project, npm run build is first executed to generate static files, and then mvn process-resources is executed for maven project, which can be copied at one click.


If the springboot project integrates vue, it is sufficient to copy the static files to the src/main/resources/static directory, so that the static files can be opened in the springboot project, and the request for api does not need to be forwarded, and there is no cross-domain problem, which is more suitable for managing the integration of back-end front-end resources.