order

This paper mainly studies how to integrate vue in springboot project

maven

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

• Create a new springboot web project. By default, static and templates folders will be generated in the resources directory
• The templates file is used to store the back-end rendering templates. Here we use the front and back-end separation method, so the folder is useless
• The static folder is 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 use 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 we assume that the vue project is named vue demo, which is under the root directory of this springboot project
• For vue project, first execute npm run build to generate static files, and then execute MVN process resources for maven project, then you can copy with one click

Summary

When integrating vue in spring boot project, you can copy the static files to src/main/resources/static directory, so that you can open the static files in spring boot project, and the requests for api do not need to be forwarded, and there is no cross domain problem, which is more suitable for managing the integration of background and front-end resources.

doc

• A Lovely Spring View: Spring Boot & Vue.js