QA：常见问题查看这里 #2461

Activity

1. eiinu

   closed this as completedon Jul 28, 2023
2. jd-opensource

   locked and limited conversation to collaborators on Jul 28, 2023
3. eiinu commented on Jul 28, 2023

   

   eiinu

   on Jul 28, 2023

   MemberAuthor

   More actions

   一、按需引入与 unplugin 插件

   1、使用 JSX、TSX 编写项目时无法实现自动按需引入

   unplugin-vue-components 插件的默认配置不识别 JSX、TSX 文件，需要手动添加 include 字段：

   Components({
     include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/],
     resolvers: [NutUIResolver()],
   })

   2、使用自动按需引入时组件没有类型提示

   unplugin-vue-components 插件会为引入的组件自动生成全局类型文件 components.d.ts，请保留该文件并在 tsconfig.json 中将它添加至 include 字段中。

   {
     "include": ["components.d.ts"]
   }
4. eiinu commented on Jul 28, 2023

   

   eiinu

   on Jul 28, 2023

   Last edited by eiinu

   MemberAuthor

   More actions

   Overlay、Popup、Dialog 等弹层组件的滚动穿透

   lock-scroll 只能阻止背景遮罩的滚动穿透问题

   内部元素依然有滚动穿透

   需要添加 catch-move

   <template>
     <nut-popup :catch-move="true">
   
     </nut-popup>
   </template>

   开启 catch-move 之后，内容过长时无法滑动

   需要内部套一层 scroll-view

   <template>
     <nut-popup :catch-move="true">
       <scroll-view>
           ......
       </scroll-view>
     </nut-popup>
   </template>
5. eiinu commented on Jul 28, 2023

   

   eiinu

   on Jul 28, 2023

   Last edited by eiinu

   MemberAuthor

   More actions

   关于 Prebundle 与 Cache

   表现1：使用组件后，微信小程序无内容，控制台警告找不到 template
   表现2：控制台报错，找不到某某文件，文件名称中包含了 prebundle

   可能的原因：开启了 Webpack 预加载或者 cache，Taro 框架下该模式会偶发丢失第三方组件库文件。
   需要在 config/index 中将 NutUI 剔除掉并关闭 cache：

   module.exports = {
     // ...
     compiler: {
       type: 'webpack5',
       prebundle: {
         exclude: ['@nutui/nutui-taro', '@nutui/icons-vue-taro']
       }
     },
     cache: {
       enable: false
     }
   }
6. eiinu commented on Jul 28, 2023

   

   eiinu

   on Jul 28, 2023

   Last edited by eiinu

   MemberAuthor

   More actions

   出现 [mini-css-extract-plugin] Conflicting order 报错

   环境：Taro 小程序

   1、如果你的文件中出现了下面这种使用方式，在不同的页面中引入相同样式时的顺序不同，mini-css-extract-plugin 插件将认为这是错误的，因为样式的先后顺序可能会影响实际的表现效果。

   // a.js
   import 'button.css'
   import 'cell.css'
   
   // b.js
   import 'cell.css'
   import 'button.css'

   2、由于 NutUI 项目默认推荐使用 unplugin-vue-components 进行组件代码和样式的引入，实际的引入顺序是该插件根据 template 中标签的使用顺序生成的，无法从外部手动调整组件引入顺序以消除此报错。

   NutUI 各个组件的样式之间没有冲突，即其顺序是无关紧要的，所以可以通过以下设置来关闭这种错误提示：

   // config/index.js
   export default {
     mini: {
       miniCssExtractPluginOption: {
         ignoreOrder: true
       }
     }
   }

   你也可以不使用 unplugin-vue-components 插件这种自动按需引入样式的方式，而是在项目入口处手动注册组件、引入对应组件的样式，这样所有组件样式的顺序由自己控制，当然不会出现这个问题，但是实在很麻烦。
7. eiinu

   pinned this issue on Jul 28, 2023
8. eiinu commented on Jul 23, 2024

   

   eiinu

   on Jul 23, 2024

   MemberAuthor

   More actions

   自定义 Tabbar 中 icon 图标无法显示

   Taro 下自定义 tabBar 默认存在样式隔离，无法引用到全局样式中的字体文件，需要手动配置：

   <script>
     export default {
       options: {
         addGlobalClass: true,
       },
     }
   </script>

   相关 issue：NervJS/taro#11060
   Taro 文档：https://docs.taro.zone/docs/custom-tabbar