有时候为了项目开发方便，我们会在SpringBoot项目中通过模板引擎技术来进行Web应用的开发，但是在一些用户页面交互非常美观的场景中，通过模板引擎技术，由于后端开发者的能力有限并不能很好的实现用户交互的UI操作，那么这个时候就需要用到我们的前端开发技术，但是前端开发完成之后与我们后端采用的模板引擎技术就又冲突了，为了解决这个问题，我们就来讨论，如何通过SpringBoot的静态资源代理的方式来实现将Vue代码打包到Jar中，通过内嵌服务器进行运行。

构建Vue前端项目

首先需要构建好一个Vue的项目，确保已经安装好的Node与npm工具，然后在Vue项目路径中通过如下的命令来构建前端项目。

npm run build

通过这命令就可以生成好构建之后的静态文件，那么接下来要做的事情就是将静态文件引入到SpringBoot项目中。

目录结构如下所示

vue-project/
├── dist/
│   ├── index.html
│   ├── js/
│   └── css/
├── src/
└── ...

配置Spring Boot项目

在构建好的SpringBoot项目的resource目录的static目录下将创建好的Vue的dist目录下的资源引入其中，这个时候SpringBoot会默认配置好静态路径的读取目录，当然我们也可以通过自定义的方式来指定静态资源的访问操作。

SpringBoot项目目录结构如下所示

spring-boot-project/
├── src/
│   ├── main/
│   │   ├── java/
│   │   ├── resources/
│   │   │   ├── static/
│   │   │   │   ├── index.html
│   │   │   │   ├── js/
│   │   │   │   └── css/
│   │   │   └── application.properties
│   │   └── ...
│   └── ...
└── ...

接下来就可以通过mvn打包的方式来对项目进行构建，构建完成之后，会在target目录下生成一个可执行的Jar包。我们就可以通过如下的操作来运行这个Jar包。

java -jar target/your-spring-boot-project.jar

然后我们就可以在浏览器中通过访问如下的连接地址来访问对应的Vue应用http://localhost:8080，这里需要注意，由于Vue项目调用的内部接口也是属于当前项目的，虽然文件是在Jar包中，但是接口调用是需要另外进行配置的，这一点与模板引擎项目有所不同。