uni-app 【报Bug】vue3 vue nvue 同时存在时 H5 端编译会加上 nvue 样式，导致 h5 端样式不可控

在 uni-app 中，当同时存在 vue 和 nvue 页面时，H5 端编译时可能会将 nvue 的样式应用到 vue 页面上，导致 H5 端样式不可控。这是因为 nvue 和 vue 的样式处理机制不同，nvue 使用的是原生渲染引擎，而 vue 使用的是 Web 渲染引擎。

问题原因

在编译过程中，nvue 的样式可能会被错误地应用到 vue 页面上，尤其是在 H5 端。这是因为 uni-app 在编译时会统一处理样式文件，而 nvue 的样式可能会影响到 vue 页面的渲染。

解决方案

1. 分离样式文件：

   • 将 vue 和 nvue 的样式文件分开，避免样式冲突。可以为 vue 和 nvue 分别创建不同的样式文件，并在各自的页面中引用。

2. 使用条件编译：

   • 使用 uni-app 的条件编译功能，针对不同的平台（如 H5、小程序、App）编写不同的样式代码。例如：

     /* #ifdef H5 */
     .h5-style {
         color: red;
     }
     /* #endif */
     
     /* #ifdef APP-PLUS */
     .nvue-style {
         color: blue;
     }
     /* #endif */
     

3. 避免全局样式污染：

   • 在 vue 页面中，尽量避免使用全局样式，而是使用 scoped 样式，确保样式只作用于当前组件。例如：

     <style scoped>
     .my-style {
         color: green;
     }
     </style>
     

4. 检查编译配置：

   • 检查 manifest.json 和 pages.json 中的配置，确保没有错误的样式引用或配置。

5. 使用 nvue 专属样式：

   • 如果某些样式只在 nvue 中生效，可以使用 nvue 专属的样式属性，避免这些样式影响到 vue 页面。

示例代码

假设你有一个 vue 页面和一个 nvue 页面，你可以这样处理样式：

vue 页面 (pages/index/index.vue):

<template>
  <view class="h5-style">
    This is a vue page.
  </view>
</template>

<style scoped>
.h5-style {
  color: red;
}
</style>

nvue 页面 (pages/nvue/index.nvue):

<template>
  <view class="nvue-style">
    This is a nvue page.
  </view>
</template>

<style>
.nvue-style {
  color: blue;
}
</style>

条件编译示例:

/* #ifdef H5 */
.h5-style {
    color: red;
}
/* #endif */

/* #ifdef APP-PLUS */
.nvue-style {
    color: blue;
}
/* #endif */