uni-app的vue2项目导入lodash模块运行正常切换vue3版本导致运行报错

操作步骤：

把项目中的vue改变到3版本运行导入lodash报错

预期结果：

把项目中的vue改变到3版本运行导入lodash 正常运行

实际结果：

把项目中的vue改变到3版本运行导入lodash报错

bug描述：

新建项目- 选择uni-app-选择默认模板创建项目
npm install lodash 导入 lodash
manifest.json "vueVersion" : "2" 正常运行
manifest.json "vueVersion" : "3" 运行项目异常

图片

环境信息

项目	信息
产品分类	uniapp/App
PC开发环境	Windows
PC版本号	10
HBuilderX	正式
HBuilderX版本	3.2.16
手机系统	Android
手机版本号	Android 10
手机厂商	华为
手机机型	pro 20
页面类型	vue
vue版本	vue3
打包方式	云端
项目创建方式	HBuilderX

更多关于uni-app的vue2项目导入lodash模块运行正常切换vue3版本导致运行报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

sinazl 1楼

更新到HBX 3.3.0版本看看，我这边没有问题

更多关于uni-app的vue2项目导入lodash模块运行正常切换vue3版本导致运行报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

songsunli 2楼

如下：

sinazl 3楼

楼主现在还有问题吗？目前我这边也发现这个问题在vue3 vite的uniapp下引入loadsh库在微信、快手是没问题的
但是抖音百度都出现问题 tma-core.js:2 [TMA] TypeError: Cannot read property ‘prototype’ of undefined

sinazl 4楼

在 Vue 3 项目中导入 lodash 报错，通常是因为 Vue 3 对 CommonJS 模块的兼容性处理方式与 Vue 2 不同。Vue 3 默认使用支持 ES 模块的构建工具（如 Vite），而 lodash 默认导出的是 CommonJS 格式，可能导致兼容性问题。

解决方案：

使用 lodash-es 替代 lodash
lodash-es 是 lodash 的 ES 模块版本，完全兼容 Vue 3 的模块系统。
安装命令：
```
npm install lodash-es
```
导入方式：
```
import { cloneDeep } from 'lodash-es'; // 按需导入
// 或
import _ from 'lodash-es'; // 整体导入
```

通过别名配置兼容 lodash
如果仍需使用 lodash，可在项目的 vite.config.js（Vue 3 项目默认使用 Vite）中添加别名配置：

import { defineConfig } from 'vite';
export default defineConfig({
  resolve: {
    alias: {
      'lodash': 'lodash-es' // 将 lodash 指向 lodash-es
    }
  }
});

检查构建工具配置
- 如果使用 Webpack（部分老项目），需在 vue.config.js 中配置 CommonJS 转译：
```
module.exports = {
  transpileDependencies: ['lodash']
};
```
- 确保 manifest.json 中 "vueVersion" 字段已正确设置为 "3"。

验证导入语法
Vue 3 推荐使用 ES 模块的按需导入，避免整体导入以减小打包体积：

import cloneDeep from 'lodash/cloneDeep'; // 正确示例
// 而非
import _ from 'lodash'; // 可能触发兼容问题

uni-app的vue2项目导入lodash模块运行正常 切换vue3版本导致运行报错