从Create React App迁移到Vite后遇到CSS与路由问题

1. react-phone-input-2 生产环境样式异常 #

可能原因 #

Vite生产环境的CSS压缩、Tree-Shaking逻辑与CRA存在差异，可能导致组件样式未被正确打包或被误删。

解决方案 #

• 确认样式完整引入：在使用组件的文件或项目入口（如main.jsx）中显式引入组件样式：

  import 'react-phone-input-2/lib/style.css'
  

  避免依赖组件内部的隐式样式引入，防止Vite的Tree-Shaking误移除未被显式引用的样式文件。
• 调整Vite CSS构建配置：在vite.config.js中修改CSS相关参数，排查是否为压缩或模块化处理导致的问题：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react()],
    css: {
      minify: false, // 临时关闭压缩，排查是否为压缩导致样式异常
      modules: {
        auto: false, // 禁用自动CSS模块化，避免组件样式被错误处理
      },
    },
  })
  

  若关闭压缩后恢复正常，可尝试调整压缩工具的参数（如使用esbuild的压缩配置），而非完全禁用压缩。
• 临时验证方案：在index.html中直接引入CDN版组件样式，确认是否为打包过程导致的问题：

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/react-phone-input-2@2.15.0/lib/style.css">
  

2. 生产环境直接访问子路由（/login、/register）出现404 #

可能原因 #

npx serve默认不支持SPA路由重写，直接访问子路由时，服务器会尝试寻找对应路径的静态文件，找不到则返回404；而根路径能正常跳转是因为根路径对应index.html文件。

解决方案 #

• 使用serve的SPA模式：启动生产服务时添加-s参数，强制所有路由请求指向index.html，由React Router处理路由逻辑：

  npx serve -s dist
  

• 配置Vite base路径（若部署在子目录）：如果应用部署在域名的子路径下，需要同步配置Vite和React Router：
  1. 在vite.config.js中设置base路径：

     export default defineConfig({
       base: '/your-sub-directory/',
       // 其他配置...
     })
     

  2. 在React Router的路由配置中设置basename：

     import { BrowserRouter } from 'react-router-dom'
     
     <BrowserRouter basename="/your-sub-directory/">
       {/* 路由内容 */}
     </BrowserRouter>
     

• 其他服务器配置（如Nginx）：如果使用Nginx部署，需添加路由重写规则，将所有请求转发到index.html：

  server {
    location / {
      try_files $uri $uri/ /index.html;
    }
  }
  

内容的提问来源于stack exchange，提问作者ssrp