React+Vite环境使用react-phone-input-2构建生产包报错

针对你遇到的Rollup无法解析react-phone-input-2/dist/lib/style.css的问题，试试以下几个方案：

• 重新安装依赖
  先删除node_modules和锁文件，重新安装依赖确保库文件完整：

  rm -rf node_modules package-lock.json
  npm install
  # 用yarn的话执行下面的
  rm -rf node_modules yarn.lock
  yarn install
  

• 修正CSS导入路径
  检查node_modules/react-phone-input-2目录下的文件结构，库的CSS文件路径可能和你当前导入的不一致。比如实际路径可能是react-phone-input-2/lib/style.css或react-phone-input-2/dist/style.css，把组件里的导入语句改成对应正确的路径：

  // 替换成实际存在的路径
  import 'react-phone-input-2/lib/style.css';
  

• 配置Vite依赖预构建
  在vite.config.js中添加optimizeDeps配置，让Vite正确预处理react-phone-input-2：

  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  
  export default defineConfig({
    plugins: [react()],
    optimizeDeps: {
      include: ['react-phone-input-2']
    }
  });
  

• 谨慎使用external配置
  不要轻易把react-phone-input-2/dist/lib/style.css添加到build.rollupOptions.external，这会让构建时忽略该文件，导致运行时样式丢失，仅当你确定要从外部加载这个CSS时才考虑这么做。

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