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实现滑动滚动条来加载数据

    在vuejs中,我们经常使用axios来请求数据,但是有时候,我们请求的数据量很大,那么我们如何实现滑动滚动条来加载数据呢,接下来小编就给大家介绍一下在vuejs中如何实现滑动滚动条来动态加载数据,需要的朋友可以参考下
    2023-10-10
  • vite基本常见的配置讲解

    vite基本常见的配置讲解

    这篇文章主要给大家介绍了关于vite基本常见配置讲解的相关资料,最近做项目要求将webpack打包方式换成vite,下面将详细讲解一下配置vite需要改动的东西,需要的朋友可以参考下
    2023-11-11
  • 详解vue组件开发脚手架

    详解vue组件开发脚手架

    本篇文章给大家详细分析了vue组件开发脚手架的相关内容以及知识点,对此有兴趣的朋友可以学习参考下。
    2018-06-06
  • vue浏览器返回监听的具体步骤

    vue浏览器返回监听的具体步骤

    这篇文章主要给大家介绍了关于vue浏览器返回监听的具体步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02
  • Element-ui Layout布局(Row和Col组件)的实现

    Element-ui Layout布局(Row和Col组件)的实现

    我们在实际开发中遇到一些布局的时候会用到Layout布局,本文就详细的介绍了Element-ui Layout布局(Row和Col组件)的实现,具有一定的参考价值,感兴趣的可以了解一下
    2021-12-12
  • 详细聊聊Vue.js中的MVVM

    详细聊聊Vue.js中的MVVM

    MVVM旨在利用WPF中的数据绑定函数,通过从视图层中几乎删除所有GUI代码(代码隐藏),更好地促进视图层开发与模式其余部分的分离,这篇文章主要给大家介绍了关于Vue.js中MVVM的相关资料,需要的朋友可以参考下
    2022-03-03
  • vue 项目地址去掉 #的方法

    vue 项目地址去掉 #的方法

    vue 项目往往会搭配 vue-router 官方路由管理器,它和 vue.js 的核心深度集成,让构建单页面应用变得易如反掌。这篇文章主要介绍了vue 项目地址去掉 #的方法,需要的朋友可以参考下
    2018-10-10
  • 图文介绍Vue父组件向子组件传值

    图文介绍Vue父组件向子组件传值

    本文通过实例代码给大家详细分享了Vue父组件向子组件传值的过程以及关键点讲解,一起学习参考下吧。
    2018-02-02
  • vue3中defineProps传值使用ref响应式失效详解

    vue3中defineProps传值使用ref响应式失效详解

    这篇文章主要给大家介绍了关于vue3中defineProps传值使用ref响应式失效的相关资料,文章通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-03-03
  • 通过实例解析chrome如何在mac环境中安装vue-devtools插件

    通过实例解析chrome如何在mac环境中安装vue-devtools插件

    这篇文章主要介绍了通过实例解析chrome如何在mac环境中安装vue-devtools插件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07

最新评论