转载

学习 Spring Boot（十）：集成 Vue 实现前后端分离

前后端分离是降低项目耦合的方式：前端工程师专注于实现前端开发，后端工程师专注于实现后端开发，前后端通过 REST API 进行交互。

Vue

创建 Maven 前端模块 web，使用 Vue Cli 在 web 模块根目录创建 Vue 工程：

vue create vue

之后提示选择默认配置还是手动配置，选择默认即可。

打包

编辑 pom.xml 文件，添加构建配置：

<build>  
    <plugins>
        <plugin>
            <groupId>com.github.eirslett</groupId>
            <artifactId>frontend-maven-plugin</artifactId>
            <version>1.6</version>
            <configuration>
                <workingDirectory>vue</workingDirectory>
                <installDirectory>bin</installDirectory>
            </configuration>
            <executions>
                <execution>
                    <id>install node and npm</id>
                    <goals>
                        <goal>install-node-and-npm</goal>
                    </goals>
                    <configuration>
                        <nodeVersion>${node.version}</nodeVersion>
                        <npmVersion>${npm.version}</npmVersion>
                    </configuration>
                </execution>

                <execution>
                    <id>npm install</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <configuration>
                        <arguments>install</arguments>
                    </configuration>
                </execution>

                <execution>
                    <id>npm build</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <configuration>
                        <arguments>run build</arguments>
                    </configuration>
                </execution>
            </executions>
        </plugin>
        <plugin>
            <artifactId>maven-resources-plugin</artifactId>
            <version>3.0.2</version>
            <executions>
                <execution>
                    <id>copy-resources</id>
                    <phase>validate</phase>
                    <goals>
                        <goal>copy-resources</goal>
                    </goals>
                    <configuration>
                        <outputDirectory>${basedir}/target/classes/public</outputDirectory>
                        <nonFilteredFileExtensions>
                            <nonFilteredFileExtension>otf</nonFilteredFileExtension>
                            <nonFilteredFileExtension>eot</nonFilteredFileExtension>
                            <nonFilteredFileExtension>svg</nonFilteredFileExtension>
                            <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
                            <nonFilteredFileExtension>woff</nonFilteredFileExtension>
                            <nonFilteredFileExtension>woff.bak</nonFilteredFileExtension>
                            <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
                        </nonFilteredFileExtensions>
                        <resources>
                            <resource>
                                <directory>${basedir}/vue/dist</directory>
                                <excludes>
                                    <exclude>src/**</exclude>
                                    <exclude>target/**</exclude>
                                    <exclude>pom.xml</exclude>
                                    <exclude>.DS_Store</exclude>
                                </excludes>
                                <filtering>true</filtering>
                            </resource>
                        </resources>
                    </configuration>
                </execution>
            </executions>
        </plugin>
    </plugins>
</build>

打包步骤如下：

① 下载 node 和 npm 二进制可执行文件；

② 在 vue 目录下，执行 npm install 命令，安装依赖；

③ 在 vue 目录下，执行 npm run build 命令，构建项目；

④ 拷贝 vue/dist 到 target/classes/public 目录。

编辑后端 server 模块 pom.xml 文件，添加前端 web 模块依赖：

<dependency>  
    <groupId>com.dyingbleed</groupId>
    <artifactId>web</artifactId>
    <version>${project.version}</version>
</dependency>

原文 http://muziyuchen.com/spring-boot-10/

正文到此结束

所属分类：编程技术 Java

本文标签： REST id web UI src git XML IO spring 配置 dist pom CTO plugin 目录安装 build 工程师 maven GitHub 下载 tar 开发专注 node API http
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

学习 Spring Boot（十）：集成 Vue 实现前后端分离

Vue

打包

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流