vue2 使用@vue/composition-api依赖包 编译、打包各种报错问题分析

 更新时间:2023年01月19日 10:43:03   作者:丿Mr_Liu  
由于package.json 文件中 vue、vue-template-compiler 版本号前面 多了个 ^ 导致实际导入时,node_module中的 vue 版本可能被升级为 2.7.x,这篇文章主要介绍了vue2 使用@vue/composition-api依赖包 编译、打包各种报错问题分析,需要的朋友可以参考下

最近在维护以前(大概一年前)的项目时,遇到个这种问题:

项目本身是用 vue-cli 创建的 vue 2.x.xx 版本的项目,然后引入 @vue/composition-api 依赖包,在实际开发中使用 vue3的语法,
如:

import { defineComponent, reactive, toRefs } from "@vue/composition-api";
export default defineComponent({
setup(props, { root }) {
 const state = reactive({ tableData: [], ... });
   ...
   return { ...toRefs(state),  ... }
  })
})
<template>
  <el-table :data="tableData">
    ...
  </el-table>
</template>

然后 npm run dev 后进入页面后出现 类似于以下的错误:

问题来源

由于package.json 文件中 vue、vue-template-compiler 版本号前面 多了个 ^ 导致实际导入时,node_module中的 vue 版本可能被升级为 2.7.x

 // package.json 
"vue": "^2.6.12",
"vue-template-compiler": "^2.6.12",

node_module下的 vue 依赖包

解决办法

1:删除当前项目的 node_module 文件夹
2:删除 package-look.json 文件
3:将 package.json 文件中的 版本号修改成固定版本

 // package.json 
"vue": "2.6.12",
"vue-template-compiler": "2.6.12",

4:重新 npm install 在运行项目

ok 问题就解决了。

注意 vue 和 vue-template-compiler 两个依赖间的版本依赖关系,如果版本不一致,可能出现依赖不兼容的问题。

到此这篇关于vue2 使用@vue/composition-api依赖包 编译、打包各种报错的文章就介绍到这了,更多相关vue2 使用@vue/composition-api内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 使用 Vue 实现一个虚拟列表的方法

    使用 Vue 实现一个虚拟列表的方法

    这篇文章主要介绍了使用 Vue 实现一个虚拟列表的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • vue实现百度下拉列表交互操作示例

    vue实现百度下拉列表交互操作示例

    这篇文章主要介绍了vue实现百度下拉列表交互操作,结合实例形式分析了vue.js使用jsonp针对百度接口进行交互的相关操作技巧,需要的朋友可以参考下
    2019-03-03
  • 基于Vue+Openlayer实现动态加载geojson的方法

    基于Vue+Openlayer实现动态加载geojson的方法

    本文通过实例代码给大家介绍基于Vue+Openlayer实现动态加载geojson的方法,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2021-09-09
  • Vue简介、引入、命令式与声明式编程详解

    Vue简介、引入、命令式与声明式编程详解

    原生开发和Vue开发的模式和特点,我们会发现是完全不同的,这里其实涉及到两种不同的编程范式:命令式编程和声明式编程,下面这篇文章主要给大家介绍了关于Vue简介、引入、命令式与声明式编程的相关资料,需要的朋友可以参考下
    2022-10-10
  • vue+echarts实现数据实时更新

    vue+echarts实现数据实时更新

    这篇文章主要为大家详细介绍了vue+echarts实现数据实时更新,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue.js 事件修饰符的使用教程

    Vue.js 事件修饰符的使用教程

    在实际开发中,不可避免的会使用到对于事件的操作,如何处理 DOM 事件流,成为我们必须要掌握的技能。这篇文章主要介绍了Vue.js 事件修饰符的使用教程,需要的朋友可以参考下
    2018-11-11
  • react和vue的事件处理差异详解

    react和vue的事件处理差异详解

    这篇文章主要介绍了react和vue的事件处理差异,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue项目中实现多文件上传功能实例代码

    vue项目中实现多文件上传功能实例代码

    我们平时经常做的是上传文件,下面这篇文章主要给大家介绍了关于vue项目中实现多文件上传功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • 在vue中对数组值变化的监听与重新响应渲染操作

    在vue中对数组值变化的监听与重新响应渲染操作

    这篇文章主要介绍了在vue中对数组值变化的监听与重新响应渲染操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue3中进行二维码的生成与解码实现详解

    Vue3中进行二维码的生成与解码实现详解

    这篇文章主要为大家介绍了Vue3中进行二维码的生成与解码实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03

最新评论