警告-WARN: vue启动项目有WARN / end value has mixed support, consider using flex-end instead

原创已于 2024-05-08 11:10:56 修改 · 1.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2024-05-08 10:48:13 首次发布

前端专栏收录该内容

348 篇文章

订阅专栏

一、WARN描述

启动项目发现控制台有这样一个WARN

end value has mixed support, consider using flex-end instead

flex布局中，end具有混合支持，请考虑使用flex-end布局

二、根据提示我们进行修改即可

align-items: end;

改成

align-items: flex-end;

修改前
.product {
  display: flex;
  justify-content: space-between;
  margin: 0 25px 25px 0;
  align-items: end;
}
修改后
.product {
  display: flex;
  justify-content: space-between;
  margin: 0 25px 25px 0;
  align-items: flex-end;
}

修改后warn不在了。成功。

四、过程记录

4.1、类似的warn，解决方法同理

(148:3) start value has mixed support, consider using flex-start instead

五、欢迎交流指正。

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

快雪时晴-初晴融雪

关注关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue：start value has mixed support, consider using flex-start instead

彭世瑜的博客

04-25

349

编译vue项目的时候出现一个warning警告。

Vue3 - 解决报错警告 [Vue warn]: Unhandled error during execution of component event handler，vue3组件问题

🏆 前端领域优质创作者

07-11

7963

vue3，nuxt3，警告，报错，组件，vue3报错，错误，Unhandlederrorduringexecutionofcomponenteventhandler，执行组件事件处理程序期间出现未处理的错误，组件components，emits，传递报错，子组件，父组件，子组件使用emits更新父组件页面列表时出现警告报错，如何解决这个问题，怎么办找不到报错原因，控制台报错，出现警告怎么解决，找不到哪里错了，vue3Unhandlederror，请求报错，http，axios，调用接口警告

参与评论您还未登录，请先登录后发表或查看评论

end value has mixed support, consider using flex-end instead

qq_33745371的博客

07-02

3367

原文：end value has mixed support, consider using flex-end instead 翻译：end 具有混合支持，请考虑改用flex end 1.发现问题在App.vue里 2.发现问题在77行，需将end改为flex-end

Vue3解决：[Vue warn]: Failed to resolve component: el-table(或el-button) 的三种解决方案

最新发布

snow的博客

09-25

1599

此外，如果遇到类似的警告信息“start value has mixed support, consider using flex-start instead”，也应采取相同的处理方式，即使用“flex-start”代替“start”。通过将不规范的Flex属性值更正为标准的“flex-end”或“flex-start”，可以消除这个警告，同时确保项目的跨浏览器兼容性‌。‌这个警告信息表明，在Flex布局中使用“end”属性时存在兼容性问题，建议使用“flex-end”代替。根据提示改为flex-end。

vue 渲染列表报错Avoid using non-primitive value as key, use string/number value instead. found in

前端程序员、项目经理、人工智能博主

12-04

914

控制台报错报错原因说v-for 循环的key值重复了，那就看看自己写的代码报错时的代码，如下: 我们可以在v-for循环里面再定义个index值,然后写到key 里面去改正后的代码报错解决，大功告成

VUE初学---事件处理 v-on:click、v-on:keyup

qq_42970981的博客

11-22

4091

为什么在 HTML 中监听事件? 你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。因为你无...

npm WARN deprecated node-pre-gyp@0.16.0: Please upgrade to @mapbox/node-pre-gyp: the non-scoped node

z2431435的博客

04-21

2961

npm WARN deprecated node-pre-gyp@0.16.0: Please upgrade to @mapbox/node-pre-gyp: the non-scoped node-pre-gyp package is deprecated and only the @mapbox scoped package will recieve updates in the future npm ERR! code 1 npm ERR! path D:\nodejs\node_modules\.

vue.runtime.esm.js:619 [Vue warn]: Duplicate keys detected: ‘/carsend‘. This may cause an update err

郭宝的博客

03-12

7113

背景：在运行一个Vue项目时，出现了如下报错信息 vue.runtime.esm.js:619 [Vue warn]: Duplicate keys detected: '/carsend'. This may cause an update error. 解决办法：错误提示说，检测到重复的密钥：“/carsend”。这可能会导致更新错误。初步判断是路由路径重名了，那么根据这条线索，全局搜索/carsend 路由路径，查找相似路径，如下图所示，确实有两个相同的路由路径那...

[Vue warn]: Error in v-on handler (Promise/async): “NavigationDuplicated: Navigating to current loca

?sonder* 的博客

08-08

1953

场景运用编程式路由导航，处在当前路由状态下，进行二次跳转（一直点击同一个按钮）时会报错 [Vue warn]: Error in v-on handler (Promise/async): "NavigationDuplicated: Navigating to current loca 解决办法使用onComplete()、onAbort() this.$router.push({ path: ‘/XXX’ },onComplete => {},onAbort => {})

处理：end value has mixed support, consider using flex-end instead

u012732909的博客

10-21

1万+

提示：end value has mixed support, consider using flex-end instead 经检查，没有规范的写flex的属性，正确的写法是 flex-end 或 flex-start 错误的写法复制代码align-items：end; 正确写法是复制代码align-items：flex-end; 如出现：start value has mixed support, consider using flex-start instead 也是同样的问题，要使

end value has mixed support, consider using flex-end instead(end 具有混合支持，请考虑改用flex-end）

m0_63853518的博客

09-19

1373

flex布局中的end 具有混合支持，请考虑改用flex-end。

【编译报错处理】start value has mixed support, consider using flex-start instead

张中华的博客

09-04

473

warning in .vue?vue&type=style&index=0&id=1fae9af4&lang=scss&scoped=true& Module Warning (from ./node_modules/postcss-loader/src/index.js): Warning (69:13) start value ...

vue报start value has mixed support, consider using flex-start instead”编译警告，在这里轻松解决！

Enjsky.G的博客

05-21

9474

前言今日在进行项目开发的过程中，遇到编译警告异常，此警告虽然不会影响项目正常运行，但对于用心去开发的小伙伴们来说，在自己的项目中，不得存在一点错误，哪怕是一个警告，所以在这里我将帮助遇到这个问题的小伙伴们轻松解决这一问题。警告异常分析如下图，可以了解到这是一个警告异常，且异常内容为“start value has mixed support, consider using flex-start instead”即开始值有混合支持，考虑使用flex-start代替。解决方案于以上经过分析，了解了异

vue-提示warning

heartOfblack 离开了电脑，我不希望我还有病

04-10

8783

[Vue warn]: Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>.出现这个警告的原因可能是你新建VUE实例的代码放在了被绑定的组件当中比如<div id='l

【Vue】Warning：“start value has mixed support, consider using flex-start instead“ 解决方法

ACM_THORN的博客

08-07

885

Vue终端警告，涉及css样式

[vue warn]: avoid using non-primitive value as key, use string/number value instead.

08-27

### 回答1：这是Vue的警告信息，意思是在使用v-for指令时，不要使用非原始值作为key，而应该使用字符串或数字值作为key。这是因为Vue在渲染列表时需要使用key来跟踪每个元素的身份，如果使用非原始值作为key，可能会导致渲染错误或性能问题。因此，建议在使用v-for指令时，始终使用字符串或数字值作为key。 ### 回答2： Vue中的“[vue warn]: avoid using non-primitive value as key, use string/number value instead.”警告的意思是在使用Vue的v-for指令时，应该使用基本类型（即字符串或数字）作为循环中的元素的key。在Vue中，当使用v-for指令迭代一个数组或对象时，需要为每个迭代的元素指定一个唯一的key属性。这样Vue才能正确地跟踪每个元素的变化并进行优化。然而，警告指出v-for指令的key属性不应该是一个非基本类型的值，例如一个对象。这是因为对象是引用类型，而在JavaScript中，当比较两个不同的对象时，它们是不相等的，即使它们具有相同的属性和值。因此，Vue无法正确地比较和跟踪对象的变化，从而导致错误和不一致的结果。解决这个问题的最佳方法是将非基本类型的值转换为字符串或数字，并使用它们作为key属性。通过将非基本类型的值转换为字符串或数字，Vue可以正确地比较和跟踪它们的变化。例如，如果使用一个对象的属性作为key属性，可以使用对象属性的字符串值作为key。综上所述，“[vue warn]: avoid using non-primitive value as key, use string/number value instead.”警告意味着在使用v-for指令时，应该将非基本类型的值转换为字符串或数字，并将它们作为key属性。通过这样做，可以避免错误和不一致的结果，并确保Vue正确地比较和跟踪元素的变化。 ### 回答3：这个警告是来自Vue的，意思是应该避免使用非原始值作为key，而应该使用字符串或数字值作为key。在Vue中，当我们使用v-for指令循环渲染一个列表时，我们需要为每个列表项提供一个唯一的key值。这个key值可以是字符串或数字类型的，但不建议使用非原始值，比如对象或函数。原因是Vue需要使用这个key值来进行性能优化和虚拟DOM的更新。如果我们使用了非原始值作为key，Vue会进行浅比较来判断是否需要更新DOM，而对于非原始值来说，浅比较可能会导致一些意外的问题。因此，为了避免这种潜在问题，Vue建议我们使用字符串或数字类型的值作为key，因为它们可以保证唯一性，并且在进行比较时更加可靠。解决这个警告的方法很简单，我们只需要将非原始值转换为字符串或数字即可。这可以通过将对象序列化为JSON字符串或使用对象的某个唯一属性作为key值来实现。总结起来，当我们在Vue中使用v-for指令渲染列表时，要避免使用非原始值作为key，而应该使用字符串或数字类型的值作为key，以避免出现性能问题和意外的更新行为。