本文详细介绍了单页应用(SPA)的技术支撑体系，涵盖核心框架、路由管理、状态管理、构建工具等关键技术。

---

主要内容包括：

1)主流前端框架(React/Vue)的SPA实现方案；

2)客户端路由管理原理与实现；

3)多种状态管理模式对比与最佳实践；

4)Webpack/Vite等构建工具配置；

5)API通信与数据获取策略；

6)性能优化关键技术；

7)服务端渲染与静态生成方案；

8)PWA与离线能力实现；

9)微前端架构支持；

10)开发工具与调试支持;

---

文章还提供了SPA部署运维方案和技术选型建议，强调SPA成功实施需要全栈技术支撑和各个环节的精心设计。

---

SPA 技术支撑体系详解

---

📊 SPA 技术栈全景图

技术支撑层级	核心技术/工具	代表实现	主要作用
核心框架层	前端框架	React、Vue、Angular、Svelte	组件化开发、状态管理、虚拟DOM
路由管理	客户端路由库	React Router、Vue Router、Angular Router	前端路由管理、URL与视图映射
状态管理	全局状态管理	Redux、MobX、Vuex、Pinia、Zustand	跨组件状态共享、数据流管理
构建工具	模块打包器	Webpack、Vite、Rollup、Parcel	代码打包、模块解析、开发服务器
样式方案	CSS 解决方案	CSS Modules、Styled Components、Tailwind CSS	组件化样式、样式隔离
API通信	HTTP 客户端	Axios、Fetch API、React Query、SWR	网络请求管理、数据获取
渲染优化	服务端渲染	Next.js、Nuxt.js、Angular Universal	首屏性能、SEO优化
开发体验	开发工具	TypeScript、ESLint、Prettier、HMR	代码质量、开发效率
部署运维	部署方案	Docker、Nginx、CDN、CI/CD	应用部署、性能优化

---

🔧 核心实现技术详解

1. 前端框架 - SPA 的基石

React 生态

// React + 现代技术栈示例
import React, { useState, useEffect } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

// 现代 React SPA 配置
function App() {
  return (
    <Provider store={store}>
      <QueryClientProvider client={queryClient}>
        <BrowserRouter>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/dashboard/*" element={<DashboardLayout />} />
          </Routes>
        </BrowserRouter>
      </QueryClientProvider>
    </Provider>
  );
}

Vue 生态

// Vue 3 + 组合式 API
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import { createPinia } from 'pinia';
import App from './App.vue';

// Vue SPA 完整配置
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/user/:id', component: UserProfile }
  ]
});

const pinia = createPinia();
const app = createApp(App);

app.use(router);
app.use(pinia);
app.mount('#app');

2. 客户端路由 - SPA 的核心特征

技术原理对比

// 传统 MPA vs SPA 路由
class MPARouter {
  navigate(url) {
    // 整页刷新
    window.location.href = url;
    // 服务器返回完整 HTML
  }
}

class SPARouter {
  constructor() {
    this.routes = {};
    this.init();
  }
  
  init() {
    // 1. 监听 URL 变化
    window.addEventListener('popstate', this.handlePopState);
    
    // 2. 拦截链接点击
    document.addEventListener('click', (e) => {
      if (e.target.tagName === 'A') {
        e.preventDefault();
        this.navigate(e.target.href);
      }
    });
  }
  
  navigate(url) {
    // 更新浏览器历史，不刷新页面
    history.pushState(null, '', url);
    
    // 根据 URL 渲染对应组件
    this.renderComponent(url);
  }
  
  renderComponent(url) {
    const route = this.matchRoute(url);
    // 动态加载组件
    this.loadComponent(route.component).then(component => {
      // 更新页面内容
      document.getElementById('app').innerHTML = '';
      component.mount('#app');
    });
  }
}

现代路由库特性

// React Router 6 示例
import {
  createBrowserRouter,
  RouterProvider,
  useLoaderData,
  useNavigation
} from "react-router-dom";

// 1. 声明式路由配置
const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    // 数据预加载
    loader: () => fetch("/api/user"),
    children: [
      {
        path: "dashboard",
        element: <Dashboard />,
        // 懒加载组件
        lazy: () => import("./pages/Dashboard")
      },
      {
        path: "settings",
        element: <Settings />,
        // 嵌套路由
        children: [
          { path: "profile", element: <Profile /> },
          { path: "security", element: <Security /> }
        ]
      }
    ]
  }
]);

// 2. 路由守卫
function ProtectedRoute({ children }) {
  const auth = useAuth();
  const location = useLocation();
  
  if (!auth.user) {
    // 重定向到登录页
    return <Navigate to="/login" state={{ from: location }} replace />;
  }
  
  return children;
}

// 3. 动态路由匹配
<Route path="/blog/:slug" element={<BlogPost />} />
<Route path="/search/*" element={<SearchResults />} />

3. 状态管理 - 复杂应用的数据中枢

多种状态管理模式对比

// 状态管理演化
const stateManagementEvolution = {
  // 1. 组件状态（简单场景）
  componentState: () => {
    const [count, setCount] = useState(0);
    return { count, setCount };
  },
  
  // 2. Context API（中等复杂度）
  contextState: () => {
    const ThemeContext = createContext();
    // 提供全局主题状态
  },
  
  // 3. Redux（大型应用）
  reduxState: () => {
    const store = configureStore({
      reducer: {
        user: userReducer,
        cart: cartReducer,
        ui: uiReducer
      }
    });
  },
  
  // 4. 现代轻量方案
  modernState: () => {
    // Zustand / Jotai / Recoil
    const useStore = create((set) => ({
      bears: 0,
      increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
    }));
  }
};

状态管理最佳实践

// 类型安全的现代状态管理
import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';

interface AppState {
  // 状态
  user: User | null;
  theme: 'light' | 'dark';
  notifications: Notification[];
  
  // Actions
  login: (userData: User) => void;
  logout: () => void;
  toggleTheme: () => void;
  addNotification: (msg: string) => void;
}

// 集成中间件
export const useAppStore = create<AppState>()(
  devtools(
    persist(
      (set, get) => ({
        user: null,
        theme: 'light',
        notifications: [],
        
        login: (userData) => set({ user: userData }),
        logout: () => set({ user: null, notifications: [] }),
        
        toggleTheme: () => set((state) => ({
          theme: state.theme === 'light' ? 'dark' : 'light'
        })),
        
        addNotification: (msg) => set((state) => ({
          notifications: [...state.notifications, {
            id: Date.now(),
            message: msg,
            read: false
          }]
        }))
      }),
      {
        name: 'app-storage', // localStorage key
        partialize: (state) => ({ 
          theme: state.theme,
          user: state.user 
        }) // 持久化字段
      }
    )
  )
);

4. 构建工具 - 开发与打包的基石

Webpack 配置示例

// webpack.config.js - SPA 典型配置
module.exports = {
  mode: process.env.NODE_ENV || 'development',
  
  entry: {
    app: './src/index.js',
    vendor: ['react', 'react-dom'] // 代码分割
  },
  
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].chunk.js',
    publicPath: '/', // SPA 重要配置
    clean: true // 清理旧构建
  },
  
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              '@babel/preset-react',
              '@babel/preset-typescript'
            ],
            plugins: [
              '@babel/plugin-transform-runtime',
              'react-hot-loader/babel'
            ]
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                auto: true,
                localIdentName: '[name]__[local]--[hash:base64:5]'
              }
            }
          },
          'postcss-loader'
        ]
      }
    ]
  },
  
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
    alias: {
      '@': path.resolve(__dirname, 'src/'),
      'components': path.resolve(__dirname, 'src/components/')
    }
  },
  
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      favicon: './public/favicon.ico',
      // SPA 关键：单入口HTML
      inject: 'body'
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  
  // SPA 开发服务器配置
  devServer: {
    historyApiFallback: true, // 关键：支持前端路由
    hot: true,
    port: 3000,
    open: true,
    proxy: {
      '/api': 'http://localhost:8080'
    }
  },
  
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors'
        }
      }
    },
    runtimeChunk: 'single'
  }
};

Vite 现代构建方案

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: 'SPA Application',
        short_name: 'SPA',
        start_url: '/',
        display: 'standalone'
      }
    })
  ],
  
  resolve: {
    alias: {
      '@': '/src',
      'components': '/src/components'
    }
  },
  
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  },
  
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom', 'react-router-dom'],
          ui: ['antd', 'styled-components']
        }
      }
    }
  }
});

5. API 通信与数据获取

现代数据获取策略

// 多层级数据获取方案
class DataFetchingStrategy {
  // 1. 基础 Fetch + 缓存
  static async fetchWithCache(url, options = {}) {
    const cacheKey = `cache_${url}`;
    const cached = sessionStorage.getItem(cacheKey);
    
    if (cached && !options.forceRefresh) {
      return JSON.parse(cached);
    }
    
    const response = await fetch(url, options);
    const data = await response.json();
    
    sessionStorage.setItem(cacheKey, JSON.stringify(data));
    return data;
  }
  
  // 2. React Query 现代化方案
  static useQueryBased() {
    const { data, isLoading, error } = useQuery({
      queryKey: ['todos'],
      queryFn: () => fetch('/api/todos').then(res => res.json()),
      staleTime: 5 * 60 * 1000, // 5分钟缓存
      cacheTime: 10 * 60 * 1000, // 10分钟保留
      retry: 3, // 自动重试
      refetchOnWindowFocus: true // 窗口聚焦时刷新
    });
  }
  
  // 3. GraphQL 集成
  static useGraphQL() {
    const { data, loading } = useQuery(gql`
      query GetUser($id: ID!) {
        user(id: $id) {
          id
          name
          email
          posts {
            title
            content
          }
        }
      }
    `, { variables: { id: '1' } });
  }
  
  // 4. WebSocket 实时数据
  static useWebSocket() {
    const [data, setData] = useState(null);
    
    useEffect(() => {
      const ws = new WebSocket('wss://api.example.com/realtime');
      
      ws.onmessage = (event) => {
        setData(JSON.parse(event.data));
      };
      
      return () => ws.close();
    }, []);
  }
}

API 客户端封装

// 企业级 API 客户端
import axios from 'axios';

const apiClient = axios.create({
  baseURL: process.env.REACT_APP_API_URL,
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json'
  }
});

// 请求拦截器
apiClient.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('access_token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// 响应拦截器
apiClient.interceptors.response.use(
  (response) => response.data,
  async (error) => {
    const originalRequest = error.config;
    
    // Token 过期处理
    if (error.response?.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      
      try {
        const refreshToken = localStorage.getItem('refresh_token');
        const { data } = await axios.post('/auth/refresh', { refreshToken });
        
        localStorage.setItem('access_token', data.accessToken);
        apiClient.defaults.headers.common['Authorization'] = 
          `Bearer ${data.accessToken}`;
        
        return apiClient(originalRequest);
      } catch (refreshError) {
        // 刷新失败，跳转到登录页
        window.location.href = '/login';
        return Promise.reject(refreshError);
      }
    }
    
    return Promise.reject(error);
  }
);

// 类型安全的 API 调用
export const api = {
  get: <T>(url: string, config?: AxiosRequestConfig) =>
    apiClient.get<T>(url, config),
  
  post: <T>(url: string, data?: any, config?: AxiosRequestConfig) =>
    apiClient.post<T>(url, data, config),
  
  // 文件上传
  upload: (url: string, file: File, onProgress?: (progress: number) => void) => {
    const formData = new FormData();
    formData.append('file', file);
    
    return apiClient.post(url, formData, {
      headers: { 'Content-Type': 'multipart/form-data' },
      onUploadProgress: (progressEvent) => {
        const percentCompleted = Math.round(
          (progressEvent.loaded * 100) / (progressEvent.total || 1)
        );
        onProgress?.(percentCompleted);
      }
    });
  }
};

6. 性能优化关键技术

代码分割与懒加载

// 1. 路由级别代码分割
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Contact = lazy(() => import('./pages/Contact'));

function App() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Suspense>
  );
}

// 2. 组件级别代码分割
const HeavyComponent = lazy(() => 
  import('./components/HeavyComponent').then(module => ({
    default: module.HeavyComponent
  }))
);

// 3. 预加载策略
const preloadRoutes = () => {
  // 用户可能访问的页面预加载
  const routesToPreload = ['/dashboard', '/settings'];
  
  routesToPreload.forEach(route => {
    import(`./pages${route}`).catch(() => {});
  });
};

// 鼠标悬停预加载
const LinkWithPreload = ({ to, children }) => {
  const handleMouseEnter = () => {
    import(`./pages${to}`);
  };
  
  return (
    <Link to={to} onMouseEnter={handleMouseEnter}>
      {children}
    </Link>
  );
};

缓存策略实现

class SPACacheManager {
  constructor() {
    this.caches = {
      memory: new Map(),
      localStorage: window.localStorage,
      sessionStorage: window.sessionStorage,
      indexedDB: this.initIndexedDB()
    };
  }
  
  // 多级缓存策略
  async getWithCache(key, fetcher, options = {}) {
    const { ttl = 300000, strategy = 'memory-first' } = options;
    
    // 1. 检查内存缓存
    if (strategy.includes('memory')) {
      const memoryCache = this.caches.memory.get(key);
      if (memoryCache && Date.now() - memoryCache.timestamp < ttl) {
        return memoryCache.data;
      }
    }
    
    // 2. 检查持久化缓存
    if (strategy.includes('persistent')) {
      const stored = this.caches.localStorage.getItem(`cache_${key}`);
      if (stored) {
        const { data, timestamp } = JSON.parse(stored);
        if (Date.now() - timestamp < ttl) {
          // 更新内存缓存
          this.caches.memory.set(key, { data, timestamp });
          return data;
        }
      }
    }
    
    // 3. 从源获取
    const freshData = await fetcher();
    const cacheEntry = {
      data: freshData,
      timestamp: Date.now()
    };
    
    // 更新所有缓存层
    this.caches.memory.set(key, cacheEntry);
    this.caches.localStorage.setItem(
      `cache_${key}`, 
      JSON.stringify(cacheEntry)
    );
    
    // 设置过期清理
    setTimeout(() => {
      this.caches.memory.delete(key);
      this.caches.localStorage.removeItem(`cache_${key}`);
    }, ttl);
    
    return freshData;
  }
  
  // 图片资源缓存
  preloadCriticalImages() {
    const criticalImages = [
      '/hero-image.jpg',
      '/logo.svg',
      '/user-avatar.png'
    ];
    
    criticalImages.forEach(src => {
      const link = document.createElement('link');
      link.rel = 'preload';
      link.as = 'image';
      link.href = src;
      document.head.appendChild(link);
    });
  }
}

7. 服务端渲染与静态生成

Next.js SSR/SSG 示例

// pages/index.js - 多种渲染策略
import { useState, useEffect } from 'react';

// 1. 静态生成 (SSG)
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
  
  return {
    props: { posts },
    revalidate: 60 // 每60秒重新生成
  };
}

// 2. 服务端渲染 (SSR)
export async function getServerSideProps(context) {
  const { req, res, query } = context;
  
  const userRes = await fetch(`https://api.example.com/user`, {
    headers: { Cookie: req.headers.cookie || '' }
  });
  const user = await userRes.json();
  
  return {
    props: { user }
  };
}

// 3. 客户端渲染 (CSR) - SPA 模式
function HomePage({ posts, user }) {
  const [dynamicData, setDynamicData] = useState(null);
  
  // 客户端获取数据
  useEffect(() => {
    fetch('/api/dynamic-data')
      .then(res => res.json())
      .then(data => setDynamicData(data));
  }, []);
  
  return (
    <div>
      <h1>混合渲染策略</h1>
      {/* 静态内容 */}
      <section>{posts.map(post => (
        <article key={post.id}>{post.title}</article>
      ))}</section>
      
      {/* 服务端渲染内容 */}
      <section>欢迎, {user.name}</section>
      
      {/* 客户端渲染内容 */}
      <section>
        {dynamicData ? (
          <div>动态数据: {dynamicData.value}</div>
        ) : (
          <div>加载中...</div>
        )}
      </section>
    </div>
  );
}

export default HomePage;

8. PWA 与离线能力

// service-worker.js - 离线缓存策略
const CACHE_NAME = 'spa-cache-v1';
const OFFLINE_URL = '/offline.html';

const urlsToCache = [
  '/',
  '/index.html',
  '/styles/main.css',
  '/scripts/app.js',
  '/images/logo.png',
  OFFLINE_URL
];

// 安装阶段：预缓存关键资源
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
      .then(() => self.skipWaiting())
  );
});

// 激活阶段：清理旧缓存
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheName !== CACHE_NAME) {
            return caches.delete(cacheName);
          }
        })
      );
    }).then(() => self.clients.claim())
  );
});

// 请求拦截：缓存优先策略
self.addEventListener('fetch', event => {
  // API 请求使用网络优先
  if (event.request.url.includes('/api/')) {
    event.respondWith(
      fetch(event.request)
        .then(response => {
          // 缓存成功的 API 响应
          const clone = response.clone();
          caches.open(CACHE_NAME)
            .then(cache => cache.put(event.request, clone));
          return response;
        })
        .catch(() => {
          // 网络失败时尝试返回缓存
          return caches.match(event.request);
        })
    );
    return;
  }
  
  // 静态资源使用缓存优先
  event.respondWith(
    caches.match(event.request)
      .then(cachedResponse => {
        if (cachedResponse) {
          return cachedResponse;
        }
        
        return fetch(event.request)
          .then(response => {
            // 不缓存非 GET 请求或错误响应
            if (!response || response.status !== 200 || 
                response.type !== 'basic' || 
                event.request.method !== 'GET') {
              return response;
            }
            
            const responseToCache = response.clone();
            caches.open(CACHE_NAME)
              .then(cache => cache.put(event.request, responseToCache));
            
            return response;
          })
          .catch(() => {
            // 返回离线页面
            if (event.request.mode === 'navigate') {
              return caches.match(OFFLINE_URL);
            }
          });
      })
  );
});

9. 微前端架构支持

// 微前端 SPA 集成方案
class MicroFrontendSPA {
  constructor() {
    this.apps = new Map();
    this.currentApp = null;
  }
  
  // 注册微应用
  registerApp(name, config) {
    this.apps.set(name, {
      ...config,
      loaded: false,
      mount: null,
      unmount: null
    });
  }
  
  // 动态加载微应用
  async loadApp(name) {
    const app = this.apps.get(name);
    
    if (!app.loaded) {
      // 加载 UMD 格式的微应用
      const script = document.createElement('script');
      script.src = app.entry;
      script.onload = () => {
        const mount = window[`mount${name}`];
        const unmount = window[`unmount${name}`];
        
        app.mount = mount;
        app.unmount = unmount;
        app.loaded = true;
      };
      document.head.appendChild(script);
    }
    
    return app;
  }
  
  // 路由到微应用
  async navigateToApp(name, containerId) {
    // 卸载当前应用
    if (this.currentApp && this.currentApp.unmount) {
      await this.currentApp.unmount();
    }
    
    // 加载新应用
    const app = await this.loadApp(name);
    
    // 挂载新应用
    if (app.mount) {
      await app.mount(containerId);
      this.currentApp = app;
    }
  }
}

// 使用 single-spa 框架
import { registerApplication, start } from 'single-spa';

// 注册不同技术栈的应用
registerApplication({
  name: 'react-app',
  app: () => import('react-app/root'),
  activeWhen: '/react'
});

registerApplication({
  name: 'vue-app',
  app: () => import('vue-app/root'),
  activeWhen: '/vue'
});

// 启动微前端应用
start();

10. 开发工具与调试支持

// 现代 SPA 开发工具链
const developmentTools = {
  // 1. 调试工具
  debugging: {
    reduxDevTools: true,
    vueDevTools: true,
    reactDevTools: true,
    sourceMaps: 'inline'
  },
  
  // 2. 代码质量
  codeQuality: {
    eslint: {
      extends: ['airbnb', 'prettier'],
      rules: {
        'react/jsx-filename-extension': [1, { extensions: ['.jsx', '.tsx'] }]
      }
    },
    prettier: {
      singleQuote: true,
      trailingComma: 'es5'
    },
    husky: {
      preCommit: 'npm run lint',
      prePush: 'npm test'
    }
  },
  
  // 3. 性能监控
  performance: {
    webVitals: true,
    lighthouse: {
      audits: ['performance', 'accessibility', 'seo', 'pwa']
    },
    bundleAnalyzer: true
  },
  
  // 4. 开发服务器
  devServer: {
    hotModuleReplacement: true,
    overlay: true,
    historyApiFallback: true,
    proxy: {
      '/api': 'http://localhost:3001'
    }
  }
};

// 环境配置
const config = {
  development: {
    apiUrl: 'http://localhost:3000/api',
    enableMock: true,
    logLevel: 'debug'
  },
  staging: {
    apiUrl: 'https://staging-api.example.com',
    enableMock: false,
    logLevel: 'info'
  },
  production: {
    apiUrl: 'https://api.example.com',
    enableMock: false,
    logLevel: 'error'
  }
};

🚀 SPA 部署与运维

Nginx 配置示例

# spa-nginx.conf
server {
    listen 80;
    server_name example.com;
    root /var/www/spa-app;
    index index.html;
    
    # 开启 gzip 压缩
    gzip on;
    gzip_types text/plain text/css application/json application/javascript;
    
    # SPA 核心配置：所有路由都返回 index.html
    location / {
        try_files $uri $uri/ /index.html;
        
        # 缓存静态资源
        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
            expires 1y;
            add_header Cache-Control "public, immutable";
        }
        
        # 不缓存 HTML
        location ~* \.html$ {
            expires -1;
            add_header Cache-Control "no-cache, no-store, must-revalidate";
        }
    }
    
    # API 代理
    location /api/ {
        proxy_pass http://backend-server:3001;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
    
    # WebSocket 支持
    location /ws/ {
        proxy_pass http://backend-server:3002;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

Docker 部署

# Dockerfile
# 构建阶段
FROM node:18-alpine AS builder

WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production

COPY . .
RUN npm run build

# 生产阶段
FROM nginx:alpine

# 复制构建产物
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 暴露端口
EXPOSE 80

# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]

📈 SPA 技术选型建议

应用类型	推荐技术栈	关键考虑
中小型业务系统	Vue 3 + Vite + Pinia	开发效率、学习成本
大型企业应用	React + TypeScript + Redux Toolkit	类型安全、可维护性
内容型网站	Next.js/Nuxt.js	SEO、首屏性能
移动端应用	React Native/Vue Native	跨平台、原生体验
实时应用	Vue/React + Socket.io	实时性、连接管理
微前端架构	single-spa/qiankun	团队自治、独立部署

---

🎯 总结：SPA 技术支撑要点

1. 核心框架选择：根据团队技能和项目需求

2. 路由管理：必须支持客户端路由和历史管理

3. 状态管理：随着应用复杂度增长逐步引入

4. 构建工具：Webpack 稳定，Vite 快速

5. 性能优化：代码分割、懒加载、缓存策略

6. 开发体验：HMR、TypeScript、良好的调试工具

7. 部署运维：SPA 友好的服务器配置

8. 渐进增强：PWA、SSR、微前端等按需引入

---

SPA 的成功实施需要全栈技术支撑，从前端框架到部署运维，每个环节都需要精心设计和选择合适的技术方案。