[Vue warn]: $attrs is readonly；Webpack externals 配置

最新推荐文章于 2024-04-12 13:04:15 发布
最新推荐文章于 2024-04-12 13:04:15 发布
阅读量3.5k 收藏 2
点赞数
文章标签： javascript webpack runtime ViewUI
原文链接：https://juejin.im/post/5cb571b0f265da038145cdc4
版权
项目出现Vue警告'$attrs is readonly'，原因是重复引入Vue。解决方法是在Webpack配置中使用externals，使得运行环境负责提供Vue版本，避免将Vue打包到bundle中。externals配置能防止某些依赖被打包，运行时从外部获取。了解更多关于Webpack externals的用法。
摘要由CSDN通过智能技术生成
项目报错
[Vue warn]: $attrs is readonly.
[Vue warn]: $listeners is readonly.
复制代码
原因

重复引入 Vue

解决方法

在webpack中配置上：

  externals: {
    vue: {
      root: 'Vue',
      commonjs: 'vue',
      commonjs2: 'vue',
      amd: 'vue',
    },
  },
复制代码
关于externals的理解
最低0.47元/天 解锁文章
weixin_34242509
关注
Vue - 解决安装引入 WangEditor V5 富文本编辑器后控制台报错（Nuxt.js 项目同样适用）：$attrs is readonly 、 $listeners is readonly
王佳斌
09-23 3525
解决 wangEditor 5 富文本编辑器引入后一上来就出现报错，vue2.js nuxt.js $attrs is readonly / $listeners is readonly / wangEditor 控制台一串报错，wangeditor富文本 控制台报错"无效的节点选择器" 引入wangeditor5运行报错，elementUI Date-picker 点击报“attrs is readonly”，引入wangEditor新版本报错正解如。iview Date-picker 点击报“attrs
[Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘getAttribute‘ of null“
热门推荐
郭宝的博客
06-24 11万+
错误场景一： 错误提示： 在运行Vue项目时出现了上述错误，出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的，代码如下： // 基于准备好的dom，初始化echarts实例 var bar_dv = document.getElementById('bar_dv'); let myChart = this.$echarts.init(bar_dv) 解...
报错[Vue warn]: $listeners is readonly. $attrs is readonly.怎么解决？
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
03-30 911
举个例子，project1是vue组件库，package.json中dependencies包含了"vue":“2.6.1”project1打包出了"project1":“0.0.1” 这个组件包然后project2是项目代码，package.json中dependencies包含了"vue":“2.6.1"和"project1”:“0.0.1”这样，在使用project1的组件时就会出现readonly错误【高效】极致简化vuex.js（仅需6行代码），让快速敏捷开发不是梦！
【vue】[Vue warn]: $attrs is readonly. 只读
weixin_30401605的博客
03-21 5057
[Vue warn]: $attrs is readonly. 这个问题出现时，我自己都很懵逼，明明是在 data 内声明了一个 state ，我在页面渲染完成后去改变它，但是一改变就报错，而且是我在多组件的使用下才会报错，如果页面内没有引入组件就不会报错。索信之下，我就打了个断点调试了下问题，结果发现下图： 这里使用的不是同一个 vue 源，仔细一看我下面有一个 用 cdn 加载...
vue踩坑记录:[Vue warn]: $attrs is readonly.
dblq10649的博客
03-29 1万+
今天在用element-ui的DatePicker日期选择器的时候，发现每当点击一次这个组件，控制台就会报警告`[Vue warn]: $attrs is readonly`，但是也不影响实际操作效果。网上搜了一圈后，发现是使用的vue与vue-tempalte-compiler的版本不一致造成的。当时使用的vue是最新版本2.6.10，而vue-template-compiler版...
[Vue warn]: $attrs is readonly. $listeners is readonly.
西格玛猫
10-18 5491
项目报错 [Vue warn]: $attrs is readonly. [Vue warn]: $listeners is readonly. 百度后发现应该是加载了多个Vue实例导致。 解决方法 vue.config.js chainWebpack: config => { config.resolve.alias .set('@', resolve('src')).set('vue', resolve('./node_modules/vue')) }, ...
报错[Vue warn]: $attrs is readonly. $listeners is readonly.
最新发布
weixin_45389051的博客
04-12 914
可能是加载了多个Vue实例导致，解决方法。然后重新运行项目即可。
Vue3 - $attrs 的几种用法（1个或多个根元素、Options API 和 Composition API）
weixin_39415598的博客
06-25 7013
本文简介 点赞 + 关注 + 收藏 = 学会了 使用 Vue 开发时，肯定会接触到 组件 的概念，无可避免的也会接触到 组件通讯 的概念。 组件通讯的方式有很多种，我在 《Vue3 过10种组件通讯方式》 一文中粗略罗列了 Vue3 常用的组件通讯方法。 在 Vue 2 中除了 $attrs 外，还有 $listeners ； Vue 3 把 $listeners 合并到 $attrs 里了。 而本文的重点是讲解在 Vue 3 中如何使用 $attrs 。 本文使用的 Vue 版本是 3.2.25
vue组件传值之$attrs、$listeners
weixin_45805570的博客
05-02 2264
组件传值总结 props和emit：父子组件传值 provide和inject：父子组件或者爷孙组件传值 $parent,$root,$chidren:父子组件传值 vuex 事件总线(vue实例) $attrs、$listeners:父子组件传值 前5种可能大部人都知道，这篇文章主要对$attrs、$listener进行一个介绍。 $attrs、$listeners $attrs: 官方文档介绍：包含了父作用域不作为prop被识别（且获取）的attribute绑定（class和style除外）。当一个
html vue.js readonly,router-link点击后F12出现[Vue warn]: $attrs is readonly.
weixin_31018573的博客
06-30 455
router-link点击后F12出现[Vue warn]: $attrs is readonly.[Vue warn]: $listeners is readonly.两种错误，错误截图如下：这个错误会导致被点击router-link不再自动生成router-link-exact-active和router-link-active两个class，而且原来的router-link的router-l...
关于Vue $attrs is readonly 或者 xxx is readonly.报错记录
u010499872的博客
04-12 5943
vue $attrs is readonly $listeners is readonly.
[Vue warn]: $attrs is readonly.[Vue warn]: $listeners is readonly.重复引用Vue
weixin_63203565的博客
03-10 1884
【代码】[Vue warn]: $attrs is readonly.[Vue warn]: $listeners is readonly.重复引用Vue。
vue.js:634 [Vue warn]: $attrs is readonly. Uncaught TypeError: Cannot redefine property: $router
种麦南山下的博客
06-12 498
在使用Element Calendar时，点击日期，控制台报错。 由于页面中有一个 用 cdn 加载的 vue 源，webpack也有一个源。调用的时候不是同一个 vue。找到 cdn 的加载删除即可。
解决问题 $attrs is readonly $listener is readonly
m0_57809042的博客
03-03 919
遇到问题：$attrs is readonly $listener is readonly。解决方法：^vue 和 ^vue-template-compiler前面的^去掉，如下图。改完之后，打开终端，依次输入。最后重启即可，报错消失。
$attrs is readonly $listenners is readonly 报错解决方法
m0_65450343的博客
07-15 1969
$attrs is readonly $listenners is readonly 报错解决方法
解决：[Vue warn]: Unknown custom element: router-link, [Vue warn]: $listeners and $attrs is readonly
Mybells
09-10 4697
解决一下错误： 1.[Vue warn]: Unknown custom element: <router-link> 2.[Vue warn]: $listeners and $attrs is readonly
解决 iview Date-picker 点击报“$attrs is readonly”错误
weixin_33858336的博客
11-27 1167
2019独角兽企业重金招聘Python工程师标准>>> ...
vue 一直报错 warn $listeners and $attrs is readonly “Avoid mutating a prop directly”
为啥不能换名字的博客
04-09 5741
warn $listeners and $attrs is readonly 就是报这样的错误 原因：vue和elementUI的版本不匹配 解决办法：升级vue和elementUI的版本就好了
vue 使用wangeditor $attrs is readonly.
08-04
<wangeditor :attrs="editorAttrs"> export default { data() { return { editorAttrs: {}, }; }, mounted() { this.editorAttrs = this.$attrs; // 将$attrs的值复制给editorAttrs }, }; ``` 通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值