ai-admin/admin-frontend/LIVE_SERVER_GUIDE.md

Live Server 部署指南

🎯 问题解决

之前Live Server显示空白页的问题已修复！现在构建后的文件使用相对路径，可以在任何静态文件服务器上正常运行。

🔧 修复内容

已修复的配置

在 vite.config.ts 中添加了：

build: {
  // 确保构建时使用相对路径
  assetsDir: 'assets',
  rollupOptions: {
    output: {
      // 手动分包，避免单个文件过大
      manualChunks: {
        'element-plus': ['element-plus'],
        'vue': ['vue', 'vue-router', 'pinia']
      }
    }
  }
},
// 设置基础路径为相对路径，适用于静态文件服务器
base: './',

路径对比

• 修复前: <script src="/assets/index-xxx.js"> ❌ 绝对路径
• 修复后: <script src="./assets/index-xxx.js"> ✅ 相对路径

🚀 使用步骤

1. 构建项目

npm run build:prod

2. 使用Live Server

1. 安装VS Code的Live Server插件
2. 右键点击 dist/index.html
3. 选择 "Open with Live Server"
4. 浏览器会自动打开并显示应用

3. 其他静态文件服务器

# 使用Python内置服务器
cd dist
python -m http.server 8080

# 使用Node.js serve
npm install -g serve
serve -s dist -p 8080

# 使用nginx (生产环境推荐)
# 将dist目录内容复制到nginx web根目录

🌐 环境配置

开发环境测试

# API会调用 http://localhost:8080/api
npm run build:dev

生产环境构建

# API会根据 .env.production 配置调用
npm run build:prod

📋 测试检查清单

✅ HTML文件使用相对路径
✅ CSS文件正常加载
✅ JS文件正常加载
✅ 页面可以正常显示
✅ Vue应用正常初始化
✅ 路由功能正常

⚠️ 注意事项

1. 首次访问: 直接访问 dist/index.html 即可
2. 路由问题: Vue Router使用HTML5 History模式，需要服务器配置支持
3. API调用: 确保后端服务正常运行在配置的地址上
4. CORS问题: 生产环境可能需要配置CORS策略

🔧 Nginx配置示例

server {
    listen 80;
    server_name your-domain.com;
    root /path/to/dist;
    index index.html;
    
    # 支持Vue Router的History模式
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # 静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

现在你可以使用Live Server正常打开和测试构建后的静态文件了！🎉