Vue3迁移场景下utils.js中Vue未定义如何最小改动修复

项目处于Vue2向Vue3迁移阶段，存在main.js、utils.js两个核心文件，其中utils.js导出的工具方法在项目中被大量调用，迁移期无法对所有调用点做批量修改。当前运行时utils.js中从vue包导入的Vue对象为undefined，导致所有依赖Vue.$cookies的方法执行报错。

现有代码 #

main.js #

import { createApp } from 'vue'
import Utils from "./utils.js"
import router from "...."
import VueCookies from 'vue-cookies'

const app = createApp(App);
app.use(router);
app.use(VueCookies)
app.use(Toast,Utils.toastConfig())
app.mount('#app')

utils.js #

import Vue from 'vue'
export default{
   setCookie(params){
      Vue.$cookies.set(params.name, params.value)
   }
  ...  
  // 其余多个依赖Vue.$cookies的工具方法
}

Vue3 取消了默认导出的Vue全局构造函数，因此直接import Vue from 'vue'得到的值为undefined。要做到不修改所有外部调用点、尽可能少改动utils内部逻辑，只需要修改utils.js的头部导入逻辑，无需改动其他业务代码：

1. 删除原有import Vue from 'vue'语句
2. 直接导入项目中用到的vue插件实例，手动构造一个兼容原有调用逻辑的Vue对象即可，原有工具方法内部的代码完全不需要调整。

修改后的utils.js头部代码如下：

// 替换原有import Vue from 'vue'
import $cookies from 'vue-cookies'
// 构造兼容的Vue对象，匹配原有代码的调用方式
const Vue = {
  $cookies
}

// 以下原有代码完全不需要改动
export default{
   setCookie(params){
      Vue.$cookies.set(params.name, params.value)
   }
  ...  
  // 其余原有方法保持不变
}

方案说明 #

• vue-cookies包本身导出的是全局单例实例，和app.use(VueCookies)注册到组件全局的是同一个对象，配置、操作完全同步，不会出现cookie读写不一致的问题
• 如果utils中还有其他依赖Vue全局属性的逻辑（比如Vue.$toast、Vue.$axios等），只需要在上方构造的Vue对象中补充对应导入的插件实例即可，不需要修改下层方法代码
• 所有外部引用utils的调用点完全不需要改动，迁移成本为0，等后续全量迁移完成后再统一重构工具类的实现即可。

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