知名旅游网站速查手册：版本升级后API全变？3步搞定
老铁们，有没有经历过这种崩溃时刻？项目跑得好好的，稍微升级一下依赖库，或者换了个框架版本，结果一运行，满屏红字。那个熟悉的 getBySelector 没了，query 方法签名变了，连个报错提示都看不懂。这种版本升级后 API 全变了的痛，谁懂？
别慌，这时候你需要一份能救命、能直接抄作业的速查手册。今天咱们不聊虚的，直接上手一个知名旅游网站的复刻实战项目。不是那种烂大街的“Hello World”，而是带真实业务逻辑、能应对接口变动、具备生产级思维的前后端分离项目。
我会把我在大厂踩过的坑、调过的包，全部浓缩在这篇文章里。无论你是前端小白，还是想转后端的全栈选手，跟着这份手册走，保证你不仅能把项目跑起来，还能明白为什么要这么写。
项目目标与痛点拆解
在动手敲代码之前，咱们得先搞清楚，为什么我们要做这个知名旅游网站的仿制项目，而不是直接套模板？
核心目标：还原真实业务流：包含首页推荐、景点搜索、行程规划、用户收藏四大模块。
应对API变更：模拟后端接口版本迭代（v1 - v2），前端如何通过适配层平滑过渡，而不是推倒重来。
工程化落地：从0到1搭建项目结构，涵盖环境配置、模块化开发、接口封装。为什么是“知名旅游网站”？
因为这类网站的数据结构非常典型：列表页：涉及分页、筛选、排序（按价格、距离、评分）。
详情页：涉及富文本渲染、图片懒加载、关联数据（酒店、交通）。
交互复杂：地图定位、日历选择、购物车逻辑。如果你能搞定这个，再去看电商、新闻、社交网站，本质上都是数据结构 + UI渲染的差异，底层逻辑是通的。
痛点直击：
很多教程只教你怎么把页面画出来，却忽略了一个致命问题：后端接口变了怎么办？
比如，原来返回的价格字段是 price，升级后变成了 cost.amount。原来的城市名是 city，现在变成了 location.name。
如果没有良好的速查手册和代码规范，每次接口变动，你都得去几十个组件里全局搜索替换，改漏一个就是线上事故。
我们的目标，就是建立一套抗变更的代码结构。
目录结构与工程化初始化
工欲善其事，必先利其器。咱们不用那些花里胡哨的重型脚手架，用最轻量、最灵活的方式起步。这里我推荐基于 Vite 构建，搭配 Vue 3 和 TypeScript。为什么选这仨？因为它们是目前的性能天花板，且社区生态极其丰富。
第一步：初始化项目
打开终端，执行以下命令。注意，ts 是 TypeScript 模板，js 是 JavaScript 模板。为了后续维护方便，强烈建议用 TS。
# 使用 Vite 创建 Vue 3 + TS 项目
npm create vite@latest travel-clone -- --template vue-ts
cd travel-clone
npm install第二步：安装核心依赖
这里有一个关键细节。很多新手喜欢把库装得五花八门，结果包体积爆炸。我们只装最核心的：axios：HTTP 请求库，用于处理 API 通信。
vue-router：前端路由，管理页面跳转。
pinia：状态管理，比 Vuex 更轻量、更灵活。
element-plus：UI 组件库，加快页面搭建速度（也可换 Ant Design Vue，看你喜好）。npm install axios vue-router@4 pinia element-plus
npm install -D @types/axios第三步：标准目录结构
不要把所有东西都扔在 src 根目录下！这是大忌。一个清晰的目录结构，就是你最好的速查手册。
src/
├── api/ # 接口层：所有 HTTP 请求都在这里定义
│ ├── http.ts # Axios 实例配置、拦截器
│ ├── home.ts # 首页相关接口
│ └── detail.ts # 详情页相关接口
├── assets/ # 静态资源：图片、样式
├── components/ # 公共组件：可复用的 UI 块
│ └── TourCard.vue
├── router/ # 路由配置
├── store/ # Pinia 状态管理
│ └── user.ts
├── types/ # TS 类型定义：接口的数据结构
│ └── index.ts
├── utils/ # 工具函数：日期格式化、价格处理
├── views/ # 页面级组件
│ ├── Home.vue
│ └── Detail.vue
└── App.vue为什么 api 和 types 要单独拎出来？
这就是应对“版本升级后 API 全变了”的核心策略。
当后端接口变动时，你只需要修改 api 目录下的请求 URL 和参数，以及 types 目录下的类型定义。views 和 components 里的业务逻辑代码，理论上一行都不用改。
这就是解耦的威力。
核心代码实现：构建抗变更的API层
接下来进入硬核环节。我们要实现一个通用的 Axios 封装，它不仅仅是发请求，更要处理数据适配。
1. 定义类型 (src/types/index.ts)
先明确数据结构。假设后端 v1 版本返回的景点数据如下：
// v1 版本数据结构
export interface TourV1 {id: number;name: string;price: number; // 旧版：直接是数字city: string; // 旧版：直接是字符串image: string;
}// v2 版本数据结构（假设后端升级后）
export interface TourV2 {id: number;name: string;cost: { // 新版：嵌套对象amount: number;currency: string;};location: { // 新版：嵌套对象name: string;code: string;};image: string;
}// 统一前端使用的数据模型
export interface TourFront {id: number;name: string;price: number;city: string;image: string;
}2. 封装 Axios 实例 (src/api/http.ts)
这里我们要做两件事：设置默认配置，以及编写响应拦截器。响应拦截器是处理 API 变更的“守门员”。
import axios from 'axios';
import type { TourV1, TourV2, TourFront } from '../types';// 创建 axios 实例
const http = axios.create({baseURL: 'http://api.mock-travel.com', // 模拟后端地址timeout: 5000,
});// 请求拦截器：添加 Token 等
http.interceptors.request.use(config = {// 这里可以加 tokenreturn config;
});// 响应拦截器：核心适配逻辑
http.interceptors.response.use(response = {const { data, config } = response;// 假设后端返回格式统一为 { code: 200, data: {...}, message: '' }if (data.code !== 200) {return Promise.reject(new Error(data.message || 'Error'));}// 关键逻辑：根据接口版本进行数据转换// 这里我们做一个简单的判断，如果 URL 包含 /v2，则执行 v2 到 front 的转换if (config.url config.url.includes('/v2/tours')) {return transformV2ToV1(data.data);}return data.data;},error = {// 统一错误处理console.error('API Error:', error.message);return Promise.reject(error);}
);// 数据适配器：将 V2 复杂结构扁平化为前端易用的结构
function transformV2ToV1(v2Data: TourV2[]): TourFront[] {return v2Data.map(item = ({id: item.id,name: item.name,// 从嵌套对象中提取值price: item.cost.amount,city: item.location.name,image: item.image}));
}export default http;逐行讲解：baseURL：集中管理接口域名，方便切换测试/生产环境。
response 拦截器：这里没有直接返回 data，而是根据 config.url 判断是否需要进行数据映射。
transformV2ToV1：这是一个纯函数。它的作用是将后端复杂的、可能随着版本变化而变动的数据结构，转换成前端组件内部统一使用的 TourFront 结构。
核心价值：即使后端明天升级到 v3，字段又变了，你只需要在 http.ts 里加一个 transformV3ToV1 函数，并在拦截器里加一行判断。你的 Home.vue 和 Detail.vue 完全不需要动。这就是速查手册里最该记下的架构思想。3. 定义具体接口 (src/api/home.ts)
import http from './http';
import type { TourFront } from '../types';// 获取首页推荐景点
// 注意：这里调用的是 v2 接口，但前端拿到的是适配后的 TourFront
export function getHomeTours() {return http.get('/v2/tours/recommend');
}4. 页面组件调用 (src/views/Home.vue)
templatediv class=home-containerh1热门旅游目的地/h1div v-if=loading加载中.../divdiv v-else-if=error class=error{{ error }}/divdiv v-else class=tour-griddiv v-for=tour in tours :key=tour.id class=tour-cardimg :src=tour.image :alt=tour.name /h3{{ tour.name }}/h3p城市: {{ tour.city }}/pp class=price¥{{ tour.price }}/p/div/div/div
/templatescript setup lang=ts
import { ref, onMounted } from 'vue';
import { getHomeTours } from '../api/home';
import type { TourFront } from '../types';const tours = refTourFront[]([]);
const loading = ref(true);
const error = ref('');onMounted(async () = {try {// 直接调用，无需关心后端是 v1 还是 v2const data = await getHomeTours();tours.value = data;} catch (err: any) {error.value = err.message;} finally {loading.value = false;}
});
/scriptstyle scoped
/* 省略样式，重点看逻辑 */
.tour-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 16px;
}
/style看到了吗？组件里非常干净。它只关心 tours 数组里有没有 name、city、price。它不关心这些字段是从 item.cost.amount 还是 item.price 来的。
运行与测试：验证适配层的有效性
代码写完了，怎么证明我们的速查手册真的有用？我们需要模拟后端接口变更的场景。
1. 使用 Mock 服务
真实开发中，我们不能总等后端改完。我们可以用 json-server 或者简单的静态 JSON 文件来模拟。
创建一个 mock-server.js：
// 简单的模拟服务器
const express = require('express');
const app = express();// 模拟 v1 数据
const v1Data = [{ id: 1, name: '黄山', price: 199, city: '安徽', image: 'img1.jpg' }
];// 模拟 v2 数据（结构变了）
const v2Data = [{ id: 1, name: '黄山', cost: { amount: 199, currency: 'CNY' }, location: { name: '安徽', code: 'AN' }, image: 'img1.jpg' }
];app.get('/v1/tours', (req, res) = {res.json({ code: 200, data: v1Data });
});app.get('/v2/tours', (req, res) = {res.json({ code: 200, data: v2Data });
});app.listen(3000, () = console.log('Mock server running on 3000'));2. 切换测试场景 A：在 api/home.ts 中调用 /v1/tours。此时 http.ts 中的 transformV2ToV1 不会被触发（因为 URL 不含 /v2），数据直接透传。前端正常显示。
场景 B：在 api/home.ts 中调用 /v2/tours。此时 http.ts 拦截器捕获响应，发现 URL 匹配，执行 transformV2ToV1。后端返回的是嵌套结构，前端拿到的依然是扁平的 { price: 199, city: '安徽' }。测试结果：
无论后端切换到哪个版本，前端页面零代码修改，完美渲染。
3. 单元测试（可选但推荐）
使用 Vitest 测试 transformV2ToV1 函数：
// src/utils/__tests__/transform.test.ts
import { describe, it, expect } from 'vitest';
import { transformV2ToV1 } from '../api/http'; // 假设导出了该函数describe('API Adapter', () = {it('should transform v2 data to v1 format', () = {const v2Input = [{id: 1,name: 'Test',cost: { amount: 100, currency: 'USD' },location: { name: 'NY', code: 'US' },image: 'a.png'}];const result = transformV2ToV1(v2Input);expect(result[0].price).toBe(100);expect(result[0].city).toBe('NY');});
});确保这个适配逻辑是稳定的。这是整个项目最核心的“黑盒”，必须经过测试保障。
优化扩展：从Demo到生产级
项目能跑了，但离生产级还有距离。以下是几个关键的优化方向，也是你面试时能加分的点。
1. 请求缓存与去重
在首页，如果用户快速切换 Tab，可能会发出重复请求。可以在 http.ts 中增加一个简单的 Map 缓存：
const requestCache = new Mapstring, Promiseany();// 在 get 请求前检查
if (requestCache.has(url)) {return requestCache.get(url)!;
}const promise = http.get(url);
requestCache.set(url, promise);
return promise;2. 错误边界与降级
如果 API 挂了，页面不能白屏。在 Home.vue 中，除了显示错误信息，还可以提供“重试”按钮，或者展示本地缓存的默认数据（离线包概念）。
3. 性能优化图片懒加载：使用 loading=lazy 属性，或者引入 vue-lazyload。
路由懒加载：router 中使用 () = import('../views/Home.vue')。
代码分割：Vite 默认支持，但确保大型第三方库（如地图 SDK）动态导入。4. 部署与 CI/CD使用 vite build 生成静态资源。
配置 Nginx 反向代理，解决跨域问题（开发环境用 Vite proxy，生产环境用 Nginx）。
接入 GitHub Actions，每次 push 自动构建并部署到测试服务器。小结与互动
回顾一下，我们围绕知名旅游网站这个项目，做了一件非常有意义的事：建立了一套应对 API 变更的防御体系。分层架构：将接口请求、数据适配、UI 渲染严格分离。
适配层设计：在 Axios 拦截器中统一处理数据结构转换，屏蔽后端版本差异。
类型安全：利用 TypeScript 在编译期捕获数据结构错误。
工程化思维：清晰的目录结构、Mock 测试、性能优化。这份速查手册的核心不在于代码本身，而在于思维模式。下次遇到“版本升级后 API 全变了”的情况，不要慌着去改组件，先去看你的 API 层，把新结构适配到旧模型上。
技术栈在变，框架在变，但解耦和适配的思想永不过时。
互动时间：
在实际工作中，你是倾向于在 API 层做数据转换（像本文这样），还是直接在组件里写 if/else 判断字段是否存在？
你更常用哪种写法？评论区交流你的最佳实践，看看哪种方式在你们的团队里更站得住脚。 知名旅游网站速查手册：版本升级后API全变？3步搞定
知名旅游网站速查手册：版本升级后API全变？3步搞定
老铁们，有没有经历过这种崩溃时刻？项目跑得好好的，稍微升级一下依赖库，或者换了个框架版本，结果一运行，满屏红字。那个熟悉的 getBySelector 没了，query 方法签名变了，连个报错提示都看不懂。这种版本升级后 API 全变了的痛，谁懂？
别慌，这时候你需要一份能救命、能直接抄作业的速查手册。今天咱们不聊虚的，直接上手一个知名旅游网站的复刻实战项目。不是那种烂大街的“Hello World”，而是带真实业务逻辑、能应对接口变动、具备生产级思维的前后端分离项目。
我会把我在大厂踩过的坑、调过的包，全部浓缩在这篇文章里。无论你是前端小白，还是想转后端的全栈选手，跟着这份手册走，保证你不仅能把项目跑起来，还能明白为什么要这么写。
项目目标与痛点拆解
在动手敲代码之前，咱们得先搞清楚，为什么我们要做这个知名旅游网站的仿制项目，而不是直接套模板？
核心目标：还原真实业务流：包含首页推荐、景点搜索、行程规划、用户收藏四大模块。
应对API变更：模拟后端接口版本迭代（v1 - v2），前端如何通过适配层平滑过渡，而不是推倒重来。
工程化落地：从0到1搭建项目结构，涵盖环境配置、模块化开发、接口封装。为什么是“知名旅游网站”？
因为这类网站的数据结构非常典型：列表页：涉及分页、筛选、排序（按价格、距离、评分）。
详情页：涉及富文本渲染、图片懒加载、关联数据（酒店、交通）。
交互复杂：地图定位、日历选择、购物车逻辑。如果你能搞定这个，再去看电商、新闻、社交网站，本质上都是数据结构 + UI渲染的差异，底层逻辑是通的。
痛点直击：
很多教程只教你怎么把页面画出来，却忽略了一个致命问题：后端接口变了怎么办？
比如，原来返回的价格字段是 price，升级后变成了 cost.amount。原来的城市名是 city，现在变成了 location.name。
如果没有良好的速查手册和代码规范，每次接口变动，你都得去几十个组件里全局搜索替换，改漏一个就是线上事故。
我们的目标，就是建立一套抗变更的代码结构。
目录结构与工程化初始化
工欲善其事，必先利其器。咱们不用那些花里胡哨的重型脚手架，用最轻量、最灵活的方式起步。这里我推荐基于 Vite 构建，搭配 Vue 3 和 TypeScript。为什么选这仨？因为它们是目前的性能天花板，且社区生态极其丰富。
第一步：初始化项目
打开终端，执行以下命令。注意，ts 是 TypeScript 模板，js 是 JavaScript 模板。为了后续维护方便，强烈建议用 TS。
# 使用 Vite 创建 Vue 3 + TS 项目
npm create vite@latest travel-clone -- --template vue-ts
cd travel-clone
npm install第二步：安装核心依赖
这里有一个关键细节。很多新手喜欢把库装得五花八门，结果包体积爆炸。我们只装最核心的：axios：HTTP 请求库，用于处理 API 通信。
vue-router：前端路由，管理页面跳转。
pinia：状态管理，比 Vuex 更轻量、更灵活。
element-plus：UI 组件库，加快页面搭建速度（也可换 Ant Design Vue，看你喜好）。npm install axios vue-router@4 pinia element-plus
npm install -D @types/axios第三步：标准目录结构
不要把所有东西都扔在 src 根目录下！这是大忌。一个清晰的目录结构，就是你最好的速查手册。
src/
├── api/ # 接口层：所有 HTTP 请求都在这里定义
│ ├── http.ts # Axios 实例配置、拦截器
│ ├── home.ts # 首页相关接口
│ └── detail.ts # 详情页相关接口
├── assets/ # 静态资源：图片、样式
├── components/ # 公共组件：可复用的 UI 块
│ └── TourCard.vue
├── router/ # 路由配置
├── store/ # Pinia 状态管理
│ └── user.ts
├── types/ # TS 类型定义：接口的数据结构
│ └── index.ts
├── utils/ # 工具函数：日期格式化、价格处理
├── views/ # 页面级组件
│ ├── Home.vue
│ └── Detail.vue
└── App.vue为什么 api 和 types 要单独拎出来？
这就是应对“版本升级后 API 全变了”的核心策略。
当后端接口变动时，你只需要修改 api 目录下的请求 URL 和参数，以及 types 目录下的类型定义。views 和 components 里的业务逻辑代码，理论上一行都不用改。
这就是解耦的威力。
核心代码实现：构建抗变更的API层
接下来进入硬核环节。我们要实现一个通用的 Axios 封装，它不仅仅是发请求，更要处理数据适配。
1. 定义类型 (src/types/index.ts)
先明确数据结构。假设后端 v1 版本返回的景点数据如下：
// v1 版本数据结构
export interface TourV1 {id: number;name: string;price: number; // 旧版：直接是数字city: string; // 旧版：直接是字符串image: string;
}// v2 版本数据结构（假设后端升级后）
export interface TourV2 {id: number;name: string;cost: { // 新版：嵌套对象amount: number;currency: string;};location: { // 新版：嵌套对象name: string;code: string;};image: string;
}// 统一前端使用的数据模型
export interface TourFront {id: number;name: string;price: number;city: string;image: string;
}2. 封装 Axios 实例 (src/api/http.ts)
这里我们要做两件事：设置默认配置，以及编写响应拦截器。响应拦截器是处理 API 变更的“守门员”。
import axios from 'axios';
import type { TourV1, TourV2, TourFront } from '../types';// 创建 axios 实例
const http = axios.create({baseURL: 'http://api.mock-travel.com', // 模拟后端地址timeout: 5000,
});// 请求拦截器：添加 Token 等
http.interceptors.request.use(config = {// 这里可以加 tokenreturn config;
});// 响应拦截器：核心适配逻辑
http.interceptors.response.use(response = {const { data, config } = response;// 假设后端返回格式统一为 { code: 200, data: {...}, message: '' }if (data.code !== 200) {return Promise.reject(new Error(data.message || 'Error'));}// 关键逻辑：根据接口版本进行数据转换// 这里我们做一个简单的判断，如果 URL 包含 /v2，则执行 v2 到 front 的转换if (config.url config.url.includes('/v2/tours')) {return transformV2ToV1(data.data);}return data.data;},error = {// 统一错误处理console.error('API Error:', error.message);return Promise.reject(error);}
);// 数据适配器：将 V2 复杂结构扁平化为前端易用的结构
function transformV2ToV1(v2Data: TourV2[]): TourFront[] {return v2Data.map(item = ({id: item.id,name: item.name,// 从嵌套对象中提取值price: item.cost.amount,city: item.location.name,image: item.image}));
}export default http;逐行讲解：baseURL：集中管理接口域名，方便切换测试/生产环境。
response 拦截器：这里没有直接返回 data，而是根据 config.url 判断是否需要进行数据映射。
transformV2ToV1：这是一个纯函数。它的作用是将后端复杂的、可能随着版本变化而变动的数据结构，转换成前端组件内部统一使用的 TourFront 结构。
核心价值：即使后端明天升级到 v3，字段又变了，你只需要在 http.ts 里加一个 transformV3ToV1 函数，并在拦截器里加一行判断。你的 Home.vue 和 Detail.vue 完全不需要动。这就是速查手册里最该记下的架构思想。3. 定义具体接口 (src/api/home.ts)
import http from './http';
import type { TourFront } from '../types';// 获取首页推荐景点
// 注意：这里调用的是 v2 接口，但前端拿到的是适配后的 TourFront
export function getHomeTours() {return http.get('/v2/tours/recommend');
}4. 页面组件调用 (src/views/Home.vue)
templatediv class=home-containerh1热门旅游目的地/h1div v-if=loading加载中.../divdiv v-else-if=error class=error{{ error }}/divdiv v-else class=tour-griddiv v-for=tour in tours :key=tour.id class=tour-cardimg :src=tour.image :alt=tour.name /h3{{ tour.name }}/h3p城市: {{ tour.city }}/pp class=price¥{{ tour.price }}/p/div/div/div
/templatescript setup lang=ts
import { ref, onMounted } from 'vue';
import { getHomeTours } from '../api/home';
import type { TourFront } from '../types';const tours = refTourFront[]([]);
const loading = ref(true);
const error = ref('');onMounted(async () = {try {// 直接调用，无需关心后端是 v1 还是 v2const data = await getHomeTours();tours.value = data;} catch (err: any) {error.value = err.message;} finally {loading.value = false;}
});
/scriptstyle scoped
/* 省略样式，重点看逻辑 */
.tour-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 16px;
}
/style看到了吗？组件里非常干净。它只关心 tours 数组里有没有 name、city、price。它不关心这些字段是从 item.cost.amount 还是 item.price 来的。
运行与测试：验证适配层的有效性
代码写完了，怎么证明我们的速查手册真的有用？我们需要模拟后端接口变更的场景。
1. 使用 Mock 服务
真实开发中，我们不能总等后端改完。我们可以用 json-server 或者简单的静态 JSON 文件来模拟。
创建一个 mock-server.js：
// 简单的模拟服务器
const express = require('express');
const app = express();// 模拟 v1 数据
const v1Data = [{ id: 1, name: '黄山', price: 199, city: '安徽', image: 'img1.jpg' }
];// 模拟 v2 数据（结构变了）
const v2Data = [{ id: 1, name: '黄山', cost: { amount: 199, currency: 'CNY' }, location: { name: '安徽', code: 'AN' }, image: 'img1.jpg' }
];app.get('/v1/tours', (req, res) = {res.json({ code: 200, data: v1Data });
});app.get('/v2/tours', (req, res) = {res.json({ code: 200, data: v2Data });
});app.listen(3000, () = console.log('Mock server running on 3000'));2. 切换测试场景 A：在 api/home.ts 中调用 /v1/tours。此时 http.ts 中的 transformV2ToV1 不会被触发（因为 URL 不含 /v2），数据直接透传。前端正常显示。
场景 B：在 api/home.ts 中调用 /v2/tours。此时 http.ts 拦截器捕获响应，发现 URL 匹配，执行 transformV2ToV1。后端返回的是嵌套结构，前端拿到的依然是扁平的 { price: 199, city: '安徽' }。测试结果：
无论后端切换到哪个版本，前端页面零代码修改，完美渲染。
3. 单元测试（可选但推荐）
使用 Vitest 测试 transformV2ToV1 函数：
// src/utils/__tests__/transform.test.ts
import { describe, it, expect } from 'vitest';
import { transformV2ToV1 } from '../api/http'; // 假设导出了该函数describe('API Adapter', () = {it('should transform v2 data to v1 format', () = {const v2Input = [{id: 1,name: 'Test',cost: { amount: 100, currency: 'USD' },location: { name: 'NY', code: 'US' },image: 'a.png'}];const result = transformV2ToV1(v2Input);expect(result[0].price).toBe(100);expect(result[0].city).toBe('NY');});
});确保这个适配逻辑是稳定的。这是整个项目最核心的“黑盒”，必须经过测试保障。
优化扩展：从Demo到生产级
项目能跑了，但离生产级还有距离。以下是几个关键的优化方向，也是你面试时能加分的点。
1. 请求缓存与去重
在首页，如果用户快速切换 Tab，可能会发出重复请求。可以在 http.ts 中增加一个简单的 Map 缓存：
const requestCache = new Mapstring, Promiseany();// 在 get 请求前检查
if (requestCache.has(url)) {return requestCache.get(url)!;
}const promise = http.get(url);
requestCache.set(url, promise);
return promise;2. 错误边界与降级
如果 API 挂了，页面不能白屏。在 Home.vue 中，除了显示错误信息，还可以提供“重试”按钮，或者展示本地缓存的默认数据（离线包概念）。
3. 性能优化图片懒加载：使用 loading=lazy 属性，或者引入 vue-lazyload。
路由懒加载：router 中使用 () = import('../views/Home.vue')。
代码分割：Vite 默认支持，但确保大型第三方库（如地图 SDK）动态导入。4. 部署与 CI/CD使用 vite build 生成静态资源。
配置 Nginx 反向代理，解决跨域问题（开发环境用 Vite proxy，生产环境用 Nginx）。
接入 GitHub Actions，每次 push 自动构建并部署到测试服务器。小结与互动
回顾一下，我们围绕知名旅游网站这个项目，做了一件非常有意义的事：建立了一套应对 API 变更的防御体系。分层架构：将接口请求、数据适配、UI 渲染严格分离。
适配层设计：在 Axios 拦截器中统一处理数据结构转换，屏蔽后端版本差异。
类型安全：利用 TypeScript 在编译期捕获数据结构错误。
工程化思维：清晰的目录结构、Mock 测试、性能优化。这份速查手册的核心不在于代码本身，而在于思维模式。下次遇到“版本升级后 API 全变了”的情况，不要慌着去改组件，先去看你的 API 层，把新结构适配到旧模型上。
技术栈在变，框架在变，但解耦和适配的思想永不过时。
互动时间：
在实际工作中，你是倾向于在 API 层做数据转换（像本文这样），还是直接在组件里写 if/else 判断字段是否存在？
你更常用哪种写法？评论区交流你的最佳实践，看看哪种方式在你们的团队里更站得住脚。