Springboot integrates vue

  springboot

Order

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

maven

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
  • 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.

plugin

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
            <!-- mvn process-resources -->
            <plugin>
                <artifactId>maven-resources-plugin</artifactId>
                <executions>
                    <execution>
                        <id>copy Vue.js frontend content</id>
                        <phase>generate-resources</phase>
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <configuration>
                            <outputDirectory>src/main/resources/static</outputDirectory>
                            <overwrite>true</overwrite>
                            <resources>
                                <resource>
                                    <directory>${basedir}/vue-demo/dist</directory>
                                    <includes>
                                        <include>static/</include>
                                        <include>index.html</include>
                                    </includes>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
  • 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.

Summary

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.

doc