将 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
欢迎志同道合的朋友一起学习交流,共同进步!