当前位置：首页 > VUE

vue实现前端分离

2026-01-11 22:21:18VUE

Vue 实现前后端分离

前后端分离是一种架构模式，前端负责页面渲染和用户交互，后端负责数据处理和业务逻辑。Vue.js 作为一款流行的前端框架，非常适合实现前后端分离的开发模式。

技术选型

前端技术栈通常包括 Vue.js、Vue Router、Vuex 或 Pinia（状态管理）、Axios（HTTP 客户端）等。后端技术栈可以是 Node.js、Spring Boot、Django 等，提供 RESTful API 或 GraphQL 接口。

项目结构

前后端分离的项目通常分为两个独立的代码仓库。前端项目包含 Vue 组件、路由、状态管理等，后端项目包含 API 接口、数据库操作等。通过接口文档（如 Swagger）定义前后端交互规范。

vue实现前端分离

接口调用

前端通过 Axios 或其他 HTTP 客户端调用后端 API。建议封装 Axios 实例，统一处理请求和响应拦截、错误处理等。例如：

// src/utils/request.js
import axios from 'axios'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

service.interceptors.request.use(
  config => {
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

service.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    return Promise.reject(error)
  }
)

export default service

环境配置

通过环境变量区分开发、测试和生产环境。在项目根目录下创建 .env.development、.env.production 等文件，配置不同的 API 基地址。例如：

vue实现前端分离

# .env.development
VUE_APP_BASE_API = http://localhost:8080/api

跨域处理

开发环境下，前端和后端可能运行在不同端口，需要处理跨域问题。可以通过配置 Vue CLI 的 devServer.proxy 或后端启用 CORS 解决。例如：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}