笔记大全

SpringBoot部署Vue项目的方法

更新时间：2023-12-16

前言

Spring Boot 是一种快速开发应用程序的框架，同时 Vue.js 是一个构建用户界面的渐进式框架。 SpringBoot和Vue.js 让我们更简单地创建 Web 应用程序，它们具有许多功能,因此SpringBoot部署Vue项目需要满足以下条件：

确保Vue.js项目已经构建好
对静态文件进行管理
进行配置让前端路由与后端路由一致
让Vue.js服务运行于Spring Boot服务中

第一步：生成Vue.js项目

首先，需要在本地机器上通过Vue.js CLI 3.x来生成Vue.js项目。我们可以使用以下命令生成项目:

      $ npm install -g vue-cli
      $ vue create my-project

在项目目录下执行

      $ npm run build

完成构建后，我们会得到一个dist目录，里面包含了编译后的 Vue.js 代码。

第二步：将构建好的Vue.js代码放置在Spring Boot项目中

Spring Boot 默认情况下，静态文件的存储路径是 "/src/main/resources/static"。因此我们可以将Vue.js编译后生成的 dist 目录放置到该目录下，这样就能够访问了。我们可以在 Spring Boot 项目的 /src/main/resources/static 目录下新建一个目录，将所有的静态资源放置在这个目录下，例如：

      /src/main/resources/static
        ├── index.html
        ├── js
        ├── css

最后，我们可以通过访问 "/index.html" 来访问我们的Vue.js应用了。

第三步：让前后端路由一致

当 Vue.js 应用构建后，所有的应用代码都被打包成了一个 JS 文件。因此我们需要配置后端路由以匹配Vue.js的路由。在Spring Boot中主要使用注解 @RestController 来创建控制器：

      @RestController
      public class MyController {
        @RequestMapping("/hello")
        public String index() {
          return "Hello Spring Boot";
        }
      }

我们需要确保所有的请求都返回 index.html，这样在 Vue.js 的路由中，会根据当前 URL 加载相应的组件。因此，我们可以在控制器中添加以下代码来返回 index.html：

      @RequestMapping(value = {
        "/",
        "/{x:[\\w\\-]+}",
        "/{x:[\\w\\-]+}/{y:[\\w\\-]+}"
      })
      public String index(HttpServletRequest request) {
        if(request.getRequestURI().endsWith("/")) {
          return "/index.html";
        } else {
          return request.getRequestURI();
        }
      }

上面这段代码实际上做的是让与页面访问有关的所有路由都返回 index.html，这样 Vue.js 就有机会加载相应的组件了。

第四步：让Vue.js服务运行在Spring Boot中

我们可以考虑嵌入式服务器运行 Vue.js 应用。Spring Boot 内置了Tomcat 服务器，因此我们可以创建一个 WebMvcConfigurer 配置对象来配置 Tomcat 服务器。我们可以在 Application 类中添加以下代码以启动 Vue.js 服务：

      @SpringBootApplication
      public class Application extends SpringBootServletInitializer implements WebMvcConfigurer{
        public static void main(String[] args) {
          SpringApplication.run(Application.class, args);
        }

        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry){
          registry.addResourceHandler("/**")
            .addResourceLocations("classpath:/static/")
            .addResourceLocations("classpath:/META-INF/resources/webjars/");
        }

        @Bean
        public TomcatServletWebServerFactory tomcatFactory() {
          return new TomcatServletWebServerFactory() {
            @Override
            protected TomcatWebServer getTomcatWebServer(Tomcat tomcat) {
              tomcat.addWebapp("/",
                new File("src/main/resources/static").getAbsolutePath()
              );
              return new TomcatWebServer(tomcat, true);
            }
          };
        }
      }

我们创建了一个 Bean，来对内嵌的 Tomcat 进行动态配置，将所有的静态资源路径和 META-INF/resources/webjars 路径添加到资源管理器中，然后再将静态资源路径设置为根路径。这样，就可以启动 Spring Boot 的服务器了。

总结

在本文中，我们介绍了如何将 Vue.js 应用程序部署到 Spring Boot 中。我们使用 Vue CLI 生成 Vue.js 项目，并在 Spring Boot 的 /src/main/resources/static 目录下放置静态资源，让前端路由和后端路由一致，最后让 Vue.js 服务和 Spring Boot 服务运行在同一个端口上。这将大大提供我们Web应用的处理效率及开发调试效率。

c语言编程笔录