springboot vue前后端分离 端口该怎么写

在前后端分离的项目中，通常后端使用Spring Boot搭建，前端使用Vue框架。这两部分需要分别运行在不同的端口上。

一般来说，后端应该运行在8080端口上，前端可以运行在8081、8082等其他端口上。具体端口号可以根据实际情况来选择。

可以通过修改Spring Boot的application.properties或application.yml文件来指定后端运行的端口号，例如：

application.properties：

server.port=8080

application.yml：

server:
  port: 8080

而在前端的Vue项目中，可以通过修改config/index.js文件来指定前端运行的端口号，例如：

module.exports = {
  dev: {
    port: 8081
  }
}

在开发时，可以运行后端和前端两个项目，通过访问不同的端口来访问对应的项目。例如，后端运行在8080端口上，前端运行在8081端口上，可以通过访问http://localhost:8081来访问前端页面，通过访问http://localhost:8080/api来访问后端接口。

相关问题

springboot vue前后端分离模式

Spring Boot和Vue.js可以非常好地结合起来进行前后端分离开发。在这种模式下，后端使用Spring Boot框架开发RESTful API，前端使用Vue.js框架开发用户界面，通过API进行数据交互。

具体实现步骤如下：

1. 创建Spring Boot项目，并添加Spring Web和Spring Data JPA等必要的依赖。

2. 创建实体类和数据访问层（Repository）。

3. 创建控制器（Controller）和API接口，实现对实体类的CRUD操作。

4. 在Vue.js中使用Axios等HTTP客户端库调用API接口，获取后端数据，并渲染到页面中。

5. 在Vue.js中使用Vue Router等路由库进行页面导航。

6. 在Vue.js中使用Vuex等状态管理库进行全局状态管理。

7. 部署前端和后端分别到不同的服务器或者端口上。

通过以上步骤，就可以实现一个基本的Spring Boot和Vue.js的前后端分离应用。

springboot vue前后端分离配置

### 实现Spring Boot和Vue.js前后端分离的最佳实践

#### 项目结构规划
为了更好地管理前后端代码，在创建新项目时应分别建立独立的目录用于存放前端(Vue.js)和后端(Spring Boot)代码。这种做法有助于团队协作以及后期维护。

对于前端部分，推荐采用`vue-cli`脚手架来初始化工程[^3]：

npm install -g @vue/cli
vue create frontend-project-name

而后端则可以利用IDE(如IntelliJ IDEA Ultimate Edition)中的内置向导快速生成基础框架，或者通过Maven/Gradle命令行工具完成相同操作[^1]。

#### 配置跨域资源共享(CORS)

由于浏览器同源策略限制，默认情况下不允许来自不同域名下的请求访问资源。因此当运行于localhost的不同端口上的服务尝试通信时就会遇到障碍。解决办法是在服务器端开启CORS支持:

在Spring Boot应用程序中可以通过全局配置类的方式轻松实现这一点[^2]:

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")//允许所有路径被跨域调用
            .allowedOrigins("*") //允许任何来源发起跨域请求
            .allowCredentials(true)//是否发送Cookie凭证信息
            .maxAge(3600);         //预检请求的有效期为一个小时
    }
}

#### 设置代理转发

虽然上述方法解决了开发阶段的问题，但在生产环境中通常不会直接暴露真实IP地址给客户端应用。此时就需要借助反向代理服务器（Nginx）来进行流量分发并隐藏实际的服务位置。

编辑nginx.conf文件添加如下规则即可达到目的：

server {
    listen       80;
    server_name  localhost;

    location /api/ {           #匹配/api开头的所有URL
        proxy_pass http://127.0.0.1:8080;#将这些请求转交给本地8080端口监听着的springboot服务处理
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location / {               #其他未指定前缀的url都由vue编译后的静态页面响应
        root   html/dist/;
        try_files $uri $uri/ /index.html;
    }
}

以上就是关于如何在一个完整的Web应用程序里运用SpringBoot作为后台接口层而VueJs负责展示逻辑的具体指导说明。