quantBuddy_assetRating_demo/README_DEPLOY.md

部署到自己服务器指南

✅ 已完成的优化

1. 移除 Tailwind CSS CDN

• ✅ 已安装 tailwindcss@^3、postcss、autoprefixer
• ✅ 已创建 tailwind.config.js 和 postcss.config.js
• ✅ 已创建 src/index.css 并在 index.tsx 中导入
• ✅ 样式会被打包到 dist/assets/index-*.css

2. 移除 React 相关的 ESM.sh CDN

• ✅ package.json 中已有所有依赖
• ✅ 移除了 HTML 中的 <script type="importmap">
• ✅ Vite 会自动打包所有 React 相关依赖到 dist/assets/index-*.js

3. 字体处理

• ⚠️ 目前仍使用 Google Fonts CDN
• 选项1：保持 CDN（推荐，字体文件大）
• 选项2：本地化字体（见下文）

📦 构建和部署步骤

1. 安装依赖

npm install

2. 构建生产版本

npm run build

3. 检查 dist 目录

构建后会生成：

dist/
├── index.html
└── assets/
    ├── index-[hash].js   # 所有JS打包后的文件
    └── index-[hash].css  # 所有CSS打包后的文件

4. 部署到服务器

将整个 dist 目录上传到服务器，例如：

# Nginx 配置示例
server {
    listen 80;
    server_name your-domain.com;
    root /path/to/dist;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
}

🎨 可选：本地化 Google Fonts

如果需要完全离线，下载 Inter 字体：

1. 安装字体文件到 public/fonts/
2. 修改 src/index.css：

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
}
/* 其他字重... */

@tailwind base;
@tailwind components;
@tailwind utilities;

⚙️ 环境变量

如果使用环境变量（如 API Key），在服务器上设置：

# .env.production
GEMINI_API_KEY=your_api_key

构建时会自动注入到代码中（见 vite.config.ts）。

🚀 性能优化建议

当前打包文件较大 (621KB)，可以考虑：

1. 代码分割：使用动态导入

const DetailPage = lazy(() => import('./pages/DetailPage'));

2. 手动分包 (vite.config.ts)：

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        'react-vendor': ['react', 'react-dom', 'react-router-dom'],
        'charts': ['recharts'],
      }
    }
  }
}

📝 注意事项

1. ✅ 所有依赖已本地化（除字体）
2. ✅ 无需依赖外部 CDN（除 Google Fonts）
3. ✅ 支持单页面应用路由
4. ⚠️ 确保服务器配置了正确的 MIME 类型
5. ⚠️ 如果使用 HTTPS，Google Fonts CDN 可正常工作