当前位置：首页 > VUE

vue实现前端分离

2026-02-25 16:19:39VUE

Vue 实现前后端分离的步骤

项目结构设计

前后端分离的核心是将前端代码与后端代码独立部署。Vue 作为前端框架，通过 RESTful API 或 GraphQL 与后端交互。典型项目结构如下：

project/
├── frontend/       # Vue 前端项目
│   ├── src/
│   ├── public/
│   └── package.json
└── backend/        # 后端项目（如Spring Boot/Node.js）
    ├── src/
    └── pom.xml

前端配置

在 Vue 项目中配置代理解决跨域问题（开发环境）：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // 后端地址
        changeOrigin: true
      }
    }
  }
}

数据交互

使用 Axios 进行 HTTP 请求封装：

// src/utils/request.js
import axios from 'axios'
const service = axios.create({
  baseURL: '/api',
  timeout: 5000
})

service.interceptors.request.use(config => {
  config.headers['Authorization'] = localStorage.getItem('token')
  return config
})
export default service

路由与状态管理

配置 Vue Router 实现 SPA 路由跳转：

// src/router/index.js
const routes = [
  {
    path: '/login',
    component: () => import('@/views/Login.vue')
  }
]

使用 Vuex 管理全局状态：

// src/store/index.js
export default new Vuex.Store({
  state: {
    userInfo: null
  },
  mutations: {
    SET_USER(state, payload) {
      state.userInfo = payload
    }
  }
})

部署方案

生产环境部署需注意：

前端打包：npm run build 生成静态文件（dist 目录）

Nginx 配置示例：

server {
listen       80;
server_name  yourdomain.com;
location / {
  root   /path/to/dist;
  index  index.html;
  try_files $uri $uri/ /index.html;
}
location /api {
  proxy_pass http://backend_server;
}
}