1. 项目初始化与pnpm依赖安装问题

最近在搭建jeecgboot-vue3项目时，发现pnpm安装依赖时经常遇到各种报错。最常见的就是ERR_PNPM_INVALID_OVERRIDE_SELECTOR错误，提示无法解析package.json中的"//"注释。这个问题其实是因为pnpm在解析overrides字段时，会把"//"当作选择器而不是注释。

我尝试了几种解决方案：

1. 直接删除package.json中resolutions或pnpm.overrides字段里的"//"注释行
2. 将pnpm降级到6.23.6版本（虽然我没试这个方法，因为不想降级）
3. 改用npm或yarn安装（不推荐，会失去pnpm的优势）

这里有个小技巧：pnpm.overrides和yarn的resolutions功能类似，都是用来覆盖依赖版本的。比如项目中某个子依赖有bug，可以通过这个机制强制所有层级都使用指定版本。举个例子：

"resolutions": {
  "bin-wrapper": "npm:bin-wrapper-china",
  "rollup": "^2.56.3",
  "gifsicle": "5.2.0"
}

pnpm相比npm有几个明显优势：

• 全局安装，相同版本的依赖只会下载一次
• 项目node_modules只显示一级依赖，结构更清晰
• 安装速度更快，磁盘空间占用更小

2. esbuild安装报错处理方案

另一个常见问题是esbuild安装失败，控制台会抛出esbuild: Failed to install correctly错误。网上很多方案都是让执行node node_modules/esbuild/install.js，但实际要根据报错路径来操作。

比如我遇到的报错路径是：

/Users/ruios/web/vue-vben-admin-main/node_modules/vite-plugin-mock/node_modules/esbuild/bin/esbuild:2:7

这说明是vite-plugin-mock这个插件内部的esbuild出了问题。正确的解决方法是：

node node_modules/vite-plugin-mock/node_modules/esbuild/install.js

关键点在于：不要盲目复制网上的解决方案，一定要先看报错路径，找到具体的esbuild安装位置再执行安装脚本。有时候项目中可能有多个esbuild实例，需要分别处理。

3. Vite生产构建配置优化

在vite.config.js中配置terserOptions时，可能会遇到警告：

build.terserOptions is specified but build.minify is not set to use Terser. 
Note Vite now defaults to use esbuild for minification.

这是因为Vite默认使用esbuild进行代码压缩，如果要使用terserOptions配置，需要显式设置：

build: {
  minify: 'terser',  // 明确使用terser
  terserOptions: {
    compress: {
      drop_console: true  // 生产环境移除console
    }
  }
}

几个实用配置参数：

• compress.keep_infinity: 防止Infinity被压缩成1/0
• compress.drop_console: 移除所有console.log
• compress.pure_funcs: 指定要移除的特定console方法

实测发现，虽然官方文档说默认使用esbuild，但有些情况下默认其实是terser。所以建议明确指定minify工具，避免混淆。

4. optimizeDeps加速开发体验

vite.config.js中的optimizeDeps配置可以显著提升开发体验：

optimizeDeps: {
  include: ['lodash-es', 'axios']  // 预编译常用依赖
}

它的主要作用：

1. 将CommonJS/AMD模块转换为ES模块
2. 减少模块间的请求次数
3. 预编译依赖并缓存到.vite目录

对于大型项目，可以安装vite-plugin-optimize-persist插件来自动管理optimizeDeps配置。虽然首次加载可能较慢，但后续热更新速度会快很多。

5. 常见样式与语法问题处理

Vue3中弃用了::v-deep写法，改用:deep()：

/* 废弃写法 */
::v-deep .carousel-btn.prev {
  left: 270px;
}

/* 推荐写法 */
:deep(.carousel-btn.prev) {
  left: 270px;
}

如果使用Ant Design的暗黑模式，样式不生效可以检查：

1. 确保使用了CSS变量而非固定颜色值
2. 在vite配置中正确设置theme变量
3. 暗黑模式的修改变量在themes.ts中定义

6. 项目结构与代码规范建议

jeecgboot-vue3的推荐目录结构：

├── src
│   ├── api        # 接口请求
│   ├── assets     # 静态资源  
│   ├── components # 组件
│   ├── router     # 路由
│   ├── store      # 状态管理
│   ├── utils      # 工具函数
│   └── views      # 页面

代码规范配置建议：

1. 安装ESLint + Prettier + Stylelint
2. 配置husky实现git提交前检查
3. 使用commitlint规范提交信息
4. 配置lint-staged只检查暂存区文件

在package.json中添加：

"scripts": {
  "lint": "eslint --ext .js,.ts,.vue src",
  "format": "prettier --write src"
}

7. 性能优化实战技巧

1. 路由懒加载：使用import()动态加载页面组件
2. 组件按需引入：Ant Design组件要配置unplugin-vue-components
3. CDN引入：生产环境将vue等依赖通过CDN引入
4. Gzip压缩：配置vite-plugin-compression
5. 图片优化：使用vite-plugin-imagemin压缩图片

vite生产构建配置示例：

build: {
  rollupOptions: {
    output: {
      manualChunks(id) {
        if (id.includes('node_modules')) {
          return 'vendor'
        }
      }
    }
  }
}

8. 异常处理与调试技巧

遇到白屏问题时可以：

1. 检查浏览器控制台错误
2. 查看Network请求是否正常
3. 禁用所有浏览器插件测试
4. 对比开发和生产环境的表现差异

对于复杂的依赖问题，可以：

1. 删除node_modules和lock文件重新安装
2. 使用pnpm why 查看依赖关系
3. 检查package.json的engines字段确保Node版本兼容

调试Vite时可以添加参数：

pnpm dev --debug