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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Element-ui Layout布局(Row和Col组件)的实现
我们在实际开发中遇到一些布局的时候会用到Layout布局,本文就详细的介绍了Element-ui Layout布局(Row和Col组件)的实现,具有一定的参考价值,感兴趣的可以了解一下2021-12-12vue3中defineProps传值使用ref响应式失效详解
这篇文章主要给大家介绍了关于vue3中defineProps传值使用ref响应式失效的相关资料,文章通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-03-03通过实例解析chrome如何在mac环境中安装vue-devtools插件
这篇文章主要介绍了通过实例解析chrome如何在mac环境中安装vue-devtools插件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
最新评论