uni-app 新版本(3.4.9之后)pages.json使用媒体查询报错 但老版本(3.4.9之前)正常运行

在 uni-app 的新版本（3.4.9 之后）中，pages.json 中使用媒体查询（@media）可能会报错，而在老版本（3.4.9 之前）中却可以正常运行。这可能是由于 uni-app 在新版本中对 pages.json 的解析逻辑进行了调整，导致不再支持某些语法或功能。

可能的原因

1. 语法支持变化：新版本可能对 pages.json 的解析更加严格，不再支持某些非标准的语法或功能。
2. 媒体查询的兼容性：pages.json 本身并不是为 CSS 设计的，因此在新版本中可能移除了对媒体查询的支持。
3. 配置项调整：新版本可能对 pages.json 的配置项进行了调整，导致某些功能不再适用。

解决方案

1. 检查官方文档：首先，查看 uni-app 的官方文档，确认 pages.json 在新版本中是否仍然支持媒体查询。如果官方文档中没有明确说明，可以尝试在社区或 GitHub 上寻找相关讨论。

2. 使用条件编译：如果媒体查询的目的是为了在不同平台或设备上应用不同的样式或配置，可以考虑使用 uni-app 的条件编译功能。例如：

   {
     "pages": [
       {
         "path": "pages/index/index",
         "style": {
           "navigationBarTitleText": "首页",
           // 条件编译示例
           #ifdef H5
           "backgroundColor": "#ffffff",
           #endif
           #ifdef MP-WEIXIN
           "backgroundColor": "#f0f0f0",
           #endif
         }
       }
     ]
   }

3. 使用动态样式：如果需要在不同设备上应用不同的样式，可以在页面或组件的 style 标签中使用动态样式，结合 JavaScript 判断设备类型或屏幕宽度来动态设置样式。

4. 降级版本：如果新版本的改动对你的项目影响较大，且暂时无法找到合适的解决方案，可以考虑暂时降级到老版本（3.4.9 之前）继续开发，同时关注 uni-app 的更新动态，等待官方修复或提供替代方案。

5. 反馈问题：如果你认为这是一个 bug 或功能缺失，可以向 uni-app 官方反馈问题，提供详细的复现步骤和代码示例，帮助官方更好地理解和解决问题。

示例代码

假设你在 pages.json 中使用了媒体查询：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "@media (max-width: 600px)": {
          "backgroundColor": "#f0f0f0"
        }
      }
    }
  ]
}

在新版本中，这种写法可能会报错。你可以尝试使用条件编译或动态样式来替代：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        #ifdef H5
        "backgroundColor": "#ffffff",
        #endif
        #ifdef MP-WEIXIN
        "backgroundColor": "#f0f0f0",
        #endif
      }
    }
  ]
}

或者在页面中使用动态样式：

<template>
  <view :style="pageStyle">
    <!-- 页面内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      pageStyle: {
        backgroundColor: window.innerWidth <= 600 ? '#f0f0f0' : '#ffffff'
      }
    };
  }
};
</script>