升级Vuetify 2.0失败：检测不到Vuetify且报构造函数错误

我之前在把Vuetify 2.x迁移到Vue CLI项目时，也碰到过几乎一模一样的报错。结合你的操作步骤和代码来看，这大概率是依赖版本不兼容、环境变量配置干扰或者依赖缓存残留导致的，给你几个针对性的解决方向：

1. 先确认Vue与Vuetify的版本兼容性 #

Vuetify 2.x要求Vue版本必须是2.6.0及以上，先检查你的Vue版本：

npm list vue

如果版本低于2.6.x，先升级Vue：

npm install vue@^2.6.14 --save

2. 临时排查vue.config.js的影响 #

你的vue.config.js里修改了define插件的环境变量配置，有可能不小心干扰了Vuetify加载所需的全局变量。先试试注释掉chainWebpack的全部代码，然后重新运行：

npm run serve

如果站点能正常加载，那问题就出在环境变量的处理上。你需要调整代码，确保原有的process.env变量被完整保留，并且导入的环境变量值是字符串格式（用JSON.stringify包裹，避免define插件解析错误）：
修改vue.config.js中的赋值逻辑：

Object.keys(envMdl).forEach(function (k) {
  processEnv['VUE_APP_' + k] = JSON.stringify(envMdl[k]);
});

3. 清理依赖缓存，重新安装 #

有时候卸载重装Vuetify会留下缓存问题，导致依赖不完整。执行以下步骤彻底清理后重新安装：

# 删除依赖包和锁文件
rm -rf node_modules package-lock.json
# 重新安装所有依赖
npm install
# 重新添加Vuetify（选择Vuetify 2.x版本，因为你的项目是Vue 2）
vue add vuetify

4. 验证Vuetify的导入配置 #

你的vuetify.js和main.js代码看起来是正确的，但可以再确认两点：

• 确保vuetify/lib能正确导入，如果还是有问题，试试临时改用完整导入（不推荐长期使用，但可以用来排查）：

  import Vuetify from 'vuetify'
  import 'vuetify/dist/vuetify.min.css'
  Vue.use(Vuetify)
  

• 确认main.js中vuetify实例已经正确传入Vue构造函数，你的代码这部分是没问题的。

按这个顺序排查，应该能解决你的问题。

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