前后端项目分离打包(vue+springboot)
程序员文章站
2022-07-15 16:11:59
...
一般做法:前端用 webpack
打包完生成 dist 内容后 手动 复制 dist 文件夹的内容到后端项目的 main/resources/public
中。
推荐做法,使用 maven 插件来自动管理:
- 前端转成 maven 项目,加入前端的 maven 插件,支持 maven 执行 npm 以及 webpack 命令的执行;
<build> <plugins> <plugin> <groupId>com.github.eirslett</groupId> <artifactId>frontend-maven-plugin</artifactId> <version>${frontend-maven-plugin.version}</version> <executions> <execution> <id>install node and npm</id> <goals> <goal>install-node-and-npm</goal> </goals> <configuration> <nodeVersion>v9.11.1</nodeVersion> </configuration> </execution> <!-- Install all project dependencies --> <execution> <id>npm install</id> <goals> <goal>npm</goal> </goals> <!-- optional: default phase is "generate-resources" --> <phase>generate-resources</phase> <!-- Optional configuration which provides for running any npm command --> <configuration> <arguments>install</arguments> </configuration> </execution> <!-- Build and minify static files --> <execution> <id>npm run build</id> <goals> <goal>npm</goal> </goals> <configuration> <arguments>run build</arguments> </configuration> </execution> </executions> </plugin> </plugins> </build>
- 后端要用 maven 拷贝 前端的 dist 文件夹到
main/resources/public
中,也是用插件<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/public</outputDirectory> <overwrite>true</overwrite> <resources> <resource> <directory>${project.parent.basedir}/{your-project}/target/dist</directory> <includes> <include>static/</include> <include>index.html</include> </includes> </resource> </resources> </configuration> </execution> </executions> </plugin>
- 配置完成。打包时直接在两个项目的共同根目录执行
mvn clean package
即完成前后端项目的打包及拷贝,成功后直接运行后端项目即可。
推荐阅读
-
springBoot 解决前后端分离项目中跨越请求,同源策略
-
从零开始搭建前后端分离的NetCore2.2(EF Core CodeFirst+Autofac)+Vue的项目框架之九如何进行用户权限控制
-
基于Vue的前后端分离项目实践
-
踩坑记:前后端分离的项目启动时间过长
-
解决前后端分离项目集成shiro后,上传文件需要登录问题
-
Django+Vue.js搭建前后端分离项目的示例
-
vue+springboot前后端分离实现单点登录跨域问题解决方法
-
vue2 前后端分离项目ajax跨域session问题解决方法
-
Django+vue在腾讯云上搭建前后端分离项目
-
超简单!asp.net core前后端分离项目使用gitlab-ci持续集成到IIS