Meituan-Dianping / mpvue

基于 Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系。
http://mpvue.com
MIT License
20.41k stars 2.07k forks source link

微信开发者工具中页面样式错乱,该怎么解决? #1844

Closed zanetti4 closed 1 year ago

zanetti4 commented 1 year ago

[扼要问题描述]

一个 mpvue 项目,安装依赖成功了,启动项目,一开始有关于 display: box 的警告,后来我把 display: box 改为 display: flex,或者将其注释,现在启动项目能够看到 Compiled successfully
在微信开发者工具里打开该项目,一开始有关于无法识别的 * 样式错误,后来我把星号通配符改为微信小程序里的标签,解决了该问题。但是页面样式错乱,现在还有一个报错:

[渲染层网络层错误] Failed to load local image resource /pages/home/undefined the server responded with a status of 500 (HTTP/1.1 500 Internal Server Error) (env: Windows,mp,1.06.2306020; lib: 2.32.3)

我想本地图片资源加载失败,不会造成整个页面样式的错乱。而且经过排查,我发现页面中的 img 以及样式中的 img 选择器有问题。页面上的小图片没有显示,该图片的样式也无效。我把 img 改为 image,图片就显示出来了,图片样式也生效了,不过页面样式还是错乱的。但是我觉得不应该这样修改,如果真要这样写,为什么还要用 mpvue 呢?而且同一个项目在另一个前端同事那里启动,看到的页面是正常的。
哪位同学遇到过同样的问题?知道解决方法吗?
mpvue 版本号:

[mpvue@2.0.0]

最小化复现代码:

[建议提供最小化可运行的代码:附件或文本代码]
liteapp-aoyou-com-20230701.zip

问题复现步骤:

  1. 安装依赖
  2. 启动项目
  3. 在微信开发者工具查看

观察到的表现:

页面样式错乱。

截图或动态图:

我的

首页

ANT-CYJ commented 1 year ago

放心吧,我已经收到啦。