118 lines
2.6 KiB
Markdown
118 lines
2.6 KiB
Markdown
# 部署到自己服务器指南
|
||
|
||
## ✅ 已完成的优化
|
||
|
||
### 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. 安装依赖
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 2. 构建生产版本
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
### 3. 检查 dist 目录
|
||
构建后会生成：
|
||
```
|
||
dist/
|
||
├── index.html
|
||
└── assets/
|
||
├── index-[hash].js # 所有JS打包后的文件
|
||
└── index-[hash].css # 所有CSS打包后的文件
|
||
```
|
||
|
||
### 4. 部署到服务器
|
||
将整个 `dist` 目录上传到服务器，例如：
|
||
```bash
|
||
# 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`：
|
||
```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），在服务器上设置：
|
||
```bash
|
||
# .env.production
|
||
GEMINI_API_KEY=your_api_key
|
||
```
|
||
|
||
构建时会自动注入到代码中（见 `vite.config.ts`）。
|
||
|
||
## 🚀 性能优化建议
|
||
|
||
当前打包文件较大 (621KB)，可以考虑：
|
||
|
||
1. **代码分割**：使用动态导入
|
||
```typescript
|
||
const DetailPage = lazy(() => import('./pages/DetailPage'));
|
||
```
|
||
|
||
2. **手动分包** (vite.config.ts)：
|
||
```typescript
|
||
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 可正常工作
|
||
|