跳到主要内容

部署后样式错乱/功能异常

场景​

代码在本地开发环境一切正常，部署到线上后出现样式错乱或功能异常。

常见原因与解决​

1. CSS 加载顺序不一致​

开发模式下 CSS 是 <style> 注入，生产模式是提取的 CSS 文件。加载顺序可能变化导致样式覆盖不同。

✅ 确保 CSS 优先级明确
// 避免依赖加载顺序，使用更高优先级的选择器
// 或使用 CSS Modules / CSS-in-JS 避免冲突

2. 环境变量差异​

排查环境变量
// 开发时用的 .env.development，生产用 .env.production
// 检查 API 地址、Feature Flag 等是否正确

console.log('API_BASE:', process.env.VITE_API_BASE);
console.log('NODE_ENV:', process.env.NODE_ENV);

3. 打包压缩导致问题​

  • minify 导致 class 名变化（CSS Modules hash 不同）
  • 代码压缩导致逻辑变化（极少见但可能）
  • 开发模式没有 Tree Shaking，生产被摇掉了有副作用的代码
排查方法
// 1. 本地构建后预览
// pnpm build && pnpm preview

// 2. 关闭优化逐步排查
// vite.config.ts
export default defineConfig({
  build: {
    minify: false,     // 先关闭压缩
    sourcemap: true,   // 开启 sourcemap
  },
});

4. 路径问题​

检查 base 路径配置
// 部署在子目录时需要配置 base
// vite.config.ts
export default defineConfig({
  base: '/my-app/', // 与部署路径一致
});

常见面试问题​

Q1: 本地正常线上异常怎么排查？​

答案：

  1. 先本地 build + preview 看能否复现
  2. 检查环境变量、API 地址配置
  3. 检查 CSS 加载顺序和压缩影响
  4. 检查 base 路径和资源引用路径
  5. 开启 source map 查看压缩后的代码

相关链接​