Vue3迁移时configureCompat导入报错的解决方案咨询

问题根源 #

1. 版本不匹配：你的vue版本（3.2.13）与@vue/compat版本（3.3.4）不一致，两者必须保持完全相同的主版本和次版本
2. 未配置别名：没有将vue的导入指向@vue/compat包，导致实际导入的是原版Vue3，而原版Vue3并不包含configureCompat API

解决步骤 #

1. 统一Vue和@vue/compat的版本 #

修改package.json中的vue依赖版本，使其与@vue/compat一致：

{
  "dependencies": {
    // ... 其他依赖
    "vue": "^3.3.4",
    // ... 其他依赖
  }
}

执行命令更新依赖：

npm install

2. 配置Vue CLI别名，将vue指向@vue/compat #

在项目根目录创建或修改vue.config.js文件，添加别名配置：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  configureWebpack: {
    resolve: {
      alias: {
        'vue': '@vue/compat'
      }
    }
  }
})

或者使用链式配置方式（二选一即可）：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  chainWebpack: config => {
    config.resolve.alias.set('vue', '@vue/compat')
  }
})

3. 重启开发服务器 #

修改配置文件后，必须重启Vue CLI的开发服务器，才能让别名配置生效。

验证 #

重启服务器后，你的import { configureCompat } from "vue"语句将正确导入@vue/compat中的API，错误会消失。同时确保configureCompat的调用在createApp之前，你的当前代码顺序是正确的。

内容的提问来源于stack exchange，提问作者shuji.takeda