前后端项目分离打包(vue+springboot)
一般做法:前端用 webpack打包完生成 dist 内容后 手动 复制 dist 文件夹的内容到后端项目的 main/resources/public中。推荐做法,使用 maven 插件来自动管理:前端转成 maven 项目,加入前端的 maven 插件,支持 maven 执行 npm 以及 webpack 命令的执行;<build><plugins>...
·
一般做法:前端用 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
即完成前后端项目的打包及拷贝,成功后直接运行后端项目即可。
更多推荐
已为社区贡献1条内容
所有评论(0)