将 Vue打包文件直接集成到后端部署

将 Vue打包文件直接集成到后端部署

这里使用我的大二课程作业给大家在 Windows 下演示将 Vue打包文件直接集成到后端部署

配置前端构建输出

打开你的 Vue 项目，在终端中输入npm run build命令，直到看见Build complete.说明打包完成

打包完成后你会在目录中看见一个dist文件夹，里面会有index.html文件和css、img、js等文件夹

将 dist 中文件复制到后端项目中

假设你的后端项目使用的是Spring Boot，你需要将dist文件夹中的内容复制到src/main/resources/static目录下。这个目录是Spring Boot默认的静态资源文件目录。

配置后端服务器以服务静态文件

如果是 Spring Boot 项目，确保在application.properties或application.yml中有以下配置，这会告诉Spring Boot在处理请求时，会首先在static目录下查找匹配的静态资源

spring:
  web:
    resources:
      static-locations: classpath:/static

部署与测试

项目的启动可以直接使用 IDE 启动，也可以打包成 Jar 包后命令启动，这里直接使用一键启动

访问自己电脑的 IP 地址或者使用localhost都可，访问 Spring Boot 设置的后端端口，能看到前端页面和请求状态码200说明成功

在这种方式下，你只需要启动后端服务即可实现前后端部署

博客原文链接直达：部署之道：整合、分离与容器化的前后端部署方法
想了解更多内容，请访问我的个人博客：Panda
欢迎志同道合的朋友一起学习交流，共同进步！