Springboot、VUE启动后外部无法通过IP+端口方式访问，只能本地访问localhost

### Spring Boot与Vue集成教程 #### 项目结构概述 在一个典型的Spring Boot + Vue.js项目中，通常会采用前后端分离架构。后端主要负责业务逻辑处理以及数据接口提供；前端则专注于用户界面展示和交互设计。 对于后端部分，在`src/main/java/com/example/demo/`目录下建立控制器类文件用于定义API接口[^2]： ```java package com.example.demo.controller; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.beans.factory.annotation.Autowired; @RestController @RequestMapping("/api/goods") public class GoodsController { @Autowired private GoodsService goodsService; } ``` 而前端工程一般位于独立的文件夹内（比如命名为`vue-client`），其中包含了所有的静态资源如HTML页面、JavaScript脚本等[^3]。 #### 创建Vue应用并配置代理服务器 为了实现跨域请求，在开发阶段可以利用webpack-dev-server提供的proxy功能来解决这个问题。编辑项目的`vue.config.js`: ```javascript module.exports = { devServer: { proxy: 'http://localhost:8080' } }; ``` 这里假设后端服务运行于8080端口上，当发起HTTP请求至/api路径下的任何URL时将会被转发给该地址[^1]。 #### 构建Docker镜像部署应用程序 完成编码工作之后可以通过容器化技术简化发布流程。编写好相应的Dockerfile以便自动化打包过程: ```dockerfile FROM node:lts-alpine AS build-stage WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build FROM openjdk:17-jdk-alpine AS runtime-stage VOLUME /tmp ARG JAR_FILE=target/*.jar COPY ${JAR_FILE} app.jar ENTRYPOINT ["java","-jar","/app.jar"] EXPOSE 8080 ``` 最后一步就是启动容器实例了，命令如下所示： ```bash docker build -t demo-app:latest . docker run -d -p 8088:80 --name demo-container demo-app ``` 上述操作将使Web应用可访问于外部网络环境中的指定主机名或IP地址加上映射后的端口号处。