vue实现前端分离
Vue 实现前后端分离的步骤
项目初始化与配置
使用 Vue CLI 或 Vite 创建项目，安装必要的依赖。确保后端提供 RESTful API 或 GraphQL 接口供前端调用。
npm init vue@latest my-project
cd my-project
npm install axios vue-router pinia路由与状态管理
配置 Vue Router 实现单页应用（SPA）的路由跳转，使用 Pinia 或 Vuex 管理全局状态。
// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [{ path: '/', component: Home }]
const router = createRouter({ history: createWebHistory(), routes })
export default routerAPI 请求封装
使用 Axios 封装 HTTP 请求，统一处理请求拦截、响应拦截和错误处理。
// api/request.js
import axios from 'axios'
const instance = axios.create({ baseURL: 'https://api.example.com' })
instance.interceptors.request.use(config => {
config.headers.Authorization = localStorage.getItem('token')
return config
})
export default instance环境变量配置
通过 .env 文件管理不同环境的后端 API 地址，避免硬编码。
# .env.development
VITE_API_BASE_URL=https://dev-api.example.com跨域问题解决
开发环境下配置代理服务器，避免浏览器的同源策略限制。
// vite.config.js
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
}
}
}
})权限控制
实现路由守卫进行权限验证，保护需要登录才能访问的页面。
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated()) next('/login')
else next()
})部署优化
构建生产环境代码时启用压缩和代码分割，提升加载性能。
npm run build前后端协作规范
定义清晰的接口文档（如 Swagger），使用 TypeScript 定义 DTO 类型，确保前后端开发高效协同。
interface User {
id: number
name: string
}
