j***@163.com
j***@163.com
  • 发布:2022-02-17 10:20
  • 更新:2022-02-18 10:05
  • 阅读:1393

【报Bug】vue-cli创建的项目,代码中引用了<uni-popup>组件,小程序模拟器运行报错

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 22000.493

第三方开发者工具版本号: 微信开发者工具 stable 1.05.2201240

基础库版本号: uni-ui 1.4.11

项目创建方式: CLI

CLI版本号: 4.5.15

示例代码:

sub.vue

<template>  
    <div>  
        <div>hello world</div>  
        <div>  
            {{time}}  
        </div>  

        <uni-card>  
            <text>这是一个基础卡片示例,内容较少,此示例展示了一个没有任何属性不带阴影的卡片。123123</text>  
        </uni-card>  

        <button @click="open">打开弹窗</button>  
        <uni-popup ref="popup" type="bottom">底部弹出 Popup</uni-popup>  
    </div>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                time: new Date().getTime(),  
            }  
        },  
        onLoad() {  
            console.log('sub')  
        },  
        methods: {  
            open() {  
                // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ,type 属性将失效 ,仅支持 ['top','left','bottom','right','center']  
                this.$refs.popup.open('top')  
            }  
        }  
    }  
</script>  

<style>  
</style>  

pages.json

{  
    "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages  
        {  
            "path": "pages/index/index",  
            "style": {  
                "navigationBarTitleText": "hello uniapp"  
            }  
        },  
        {  
            "path": "pages/sub/sub",  
            "style": {  
                "navigationBarTitleText": "sub"  
            }  
        }  
    ],  
    "globalStyle": {  
        // #ifdef H5  
        "navigationStyle":"custom",  
        // #endif  
        "navigationBarTextStyle": "black",  
        "navigationBarTitleText": "hello uniapp",  
        "navigationBarBackgroundColor": "#F8F8F8",  
        "backgroundColor": "#F8F8F8"  
    },  
    "easycom": {  
        "autoscan": true,  
        "custom": {  
            "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"  
        }  
    }  
}  

操作步骤:

1、使用cli创建的uniapp项目
2、引入uni-ui
3、npm run dev:h5 一切正常
4、npm run dev:mp-weixin 运行报错

预期结果:

代码中引入普通uni-card组件时能正常编译运行,一旦引用uni-popup组件小程序模拟器运行报错

实际结果:

代码中引入普通uni-card组件时能正常编译运行,一旦引用uni-popup组件小程序模拟器运行报错

bug描述:

使用cli创建的uniapp项目在引用uni-ui中的uni-popup组件时,微信小程序环境下会引起运行报错,h5表现正常。demo中引入uni-card未出现此情况

2022-02-17 10:20 负责人:DCloud_UNI_HT 分享
已邀请:
DCloud_UNI_HT

DCloud_UNI_HT

  • 使用 npm 安装的组件,默认情况下 babel-loader 会忽略所有 node_modules 中的文件 ,导致条件编译失效,需要通过配置 vue.config.js 解决:
    // 在根目录创建 vue.config.js 文件,并配置如下  
    module.exports = {  
    transpileDependencies: ['@dcloudio/uni-ui']  
    }
  • j***@163.com (作者)

    感谢回复,有用!这个配置挺重要的,建议在文档里面增加说明。

    2022-02-18 14:19

该问题目前已经被锁定, 无法添加新回复