vue3项目原生小程序自定义组件编译错误

Question

vue3项目原生小程序自定义组件编译错误

Closed this issue 16 days ago · 6 comments

zcgzxg commented a month ago

发行方式

小程序

具体平台

微信小程序

开发环境

Linux

项目创建方式

CLI命令行

依赖版本

"dependencies": {
    "@dcloudio/uni-app": "3.0.0-4030620241128001",
    "@dcloudio/uni-app-harmony": "3.0.0-4030620241128001",
    "@dcloudio/uni-app-plus": "3.0.0-4030620241128001",
    "@dcloudio/uni-components": "3.0.0-4030620241128001",
    "@dcloudio/uni-h5": "3.0.0-4030620241128001",
    "@dcloudio/uni-mp-alipay": "3.0.0-4030620241128001",
    "@dcloudio/uni-mp-baidu": "3.0.0-4030620241128001",
    "@dcloudio/uni-mp-jd": "3.0.0-4030620241128001",
    "@dcloudio/uni-mp-kuaishou": "3.0.0-4030620241128001",
    "@dcloudio/uni-mp-lark": "3.0.0-4030620241128001",
    "@dcloudio/uni-mp-qq": "3.0.0-4030620241128001",
    "@dcloudio/uni-mp-toutiao": "3.0.0-4030620241128001",
    "@dcloudio/uni-mp-weixin": "3.0.0-4030620241128001",
    "@dcloudio/uni-mp-xhs": "3.0.0-4030620241128001",
    "@dcloudio/uni-quickapp-webview": "3.0.0-4030620241128001",
    "vue": "^3.4.21",
    "vue-i18n": "^9.1.9"
  },
  "devDependencies": {
    "@dcloudio/types": "^3.4.8",
    "@dcloudio/uni-automator": "3.0.0-4030620241128001",
    "@dcloudio/uni-cli-shared": "3.0.0-4030620241128001",
    "@dcloudio/uni-stacktracey": "3.0.0-4030620241128001",
    "@dcloudio/vite-plugin-uni": "3.0.0-4030620241128001",
    "@vue/tsconfig": "^0.1.3",
    "@vue/runtime-core": "^3.4.21",
    "typescript": "^4.9.4",
    "vite": "5.2.8",
    "vue-tsc": "^1.0.24"
  }

问题描述

在vue3项目中引入自定义组件，编译后title属性消失，似乎是未按照原生小程序组件编译，而是使用vue组件方式编译

vue原代码如下

<van-nav-bar :title="title"></van-nav-bar>

编译后

<van-nav-bar wx:if="{{a}}" u-i="d5ddc0dc-0" bind:__l="__l" u-p="{{a}}"></van-nav-bar>

pages.json

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app",
				"usingComponents": {
					"van-nav-bar": "/libs/vant-ui/nav-bar/index"
				}
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

项目结构

./src
├── libs
│   ├── calendar-month
│   ├── color-picker
│   ├── vant-ui
│   │   ├── action-sheet
│   │   ├── area
│   │   ├── button
│   │   ├── cascader
│   │   ├── cell
│   │   ├── cell-group
│   │   ├── checkbox
│   │   ├── checkbox-group
│   │   ├── circle
│   │   ├── col
│   │   ├── collapse
│   │   ├── collapse-item
│   │   ├── common
│   │   │   └── style
│   │   │       └── mixins
│   │   ├── count-down
│   │   ├── datetime-picker
│   │   ├── definitions
│   │   ├── dialog
│   │   ├── divider
│   │   ├── dropdown-item
│   │   ├── dropdown-menu
│   │   ├── empty
│   │   ├── field
│   │   ├── goods-action
│   │   ├── goods-action-button
│   │   ├── icon
│   │   ├── image
│   │   ├── image-group
│   │   ├── info
│   │   ├── loading
│   │   ├── mixins
│   │   ├── nav-bar
│   │   ├── overlay
│   │   ├── picker
│   │   ├── picker-column
│   │   ├── popup
│   │   ├── progress
│   │   ├── radio
│   │   ├── radio-group
│   │   ├── rate
│   │   ├── row
│   │   ├── search
│   │   ├── sidebar
│   │   ├── sidebar-item
│   │   ├── stepper
│   │   ├── sticky
│   │   ├── swipe-cell
│   │   ├── switch
│   │   ├── tab
│   │   ├── tabbar
│   │   ├── tabbar-item
│   │   ├── tabs
│   │   ├── tag
│   │   ├── toast
│   │   ├── transition
│   │   └── wxs
│   └── we-ui
│       ├── navigation-bar
│       └── static
│           └── icon
├── pages
│   └── index
└── static

重现步骤

pages.json中对应添加usingComponents
在页面中使用原生小程序自定义组件
运行npm run dev:mp-weixin

示例项目： https://github.com/zcgzxg/my-uniapp

期望行为

原生小程序自定义组件能够正确编译，经测试在vue2下可正常编译

实际行为

No response

截图或录屏

No response

Answer 1 · 2025-10-09T02:43:52.000Z

依赖版本太老了，建议先升级一下版本。

根目录下面新建一个 wxcomponents 文件夹，把原生组件都移动到这个文件夹下面。

Answer 2 · 2025-10-09T13:23:22.000Z

我使用 npx @dcloudio/uvm@latest升级了依赖

依赖版本

"dependencies": {
    "@dcloudio/uni-app": "3.0.0-4070620250821001",
    "@dcloudio/uni-app-harmony": "3.0.0-4070620250821001",
    "@dcloudio/uni-app-plus": "3.0.0-4070620250821001",
    "@dcloudio/uni-components": "3.0.0-4070620250821001",
    "@dcloudio/uni-h5": "3.0.0-4070620250821001",
    "@dcloudio/uni-mp-alipay": "3.0.0-4070620250821001",
    "@dcloudio/uni-mp-baidu": "3.0.0-4070620250821001",
    "@dcloudio/uni-mp-harmony": "3.0.0-4070620250821001",
    "@dcloudio/uni-mp-jd": "3.0.0-4070620250821001",
    "@dcloudio/uni-mp-kuaishou": "3.0.0-4070620250821001",
    "@dcloudio/uni-mp-lark": "3.0.0-4070620250821001",
    "@dcloudio/uni-mp-qq": "3.0.0-4070620250821001",
    "@dcloudio/uni-mp-toutiao": "3.0.0-4070620250821001",
    "@dcloudio/uni-mp-weixin": "3.0.0-4070620250821001",
    "@dcloudio/uni-mp-xhs": "3.0.0-4070620250821001",
    "@dcloudio/uni-quickapp-webview": "3.0.0-4070620250821001",
    "vue": "3.4.21",
    "vue-i18n": "9.14.5"
  },
  "devDependencies": {
    "@dcloudio/types": "3.4.24",
    "@dcloudio/uni-automator": "3.0.0-4070620250821001",
    "@dcloudio/uni-cli-shared": "3.0.0-4070620250821001",
    "@dcloudio/uni-stacktracey": "3.0.0-4070620250821001",
    "@dcloudio/vite-plugin-uni": "3.0.0-4070620250821001",
    "@vue/runtime-core": "3.5.22",
    "@vue/tsconfig": "^0.1.3",
    "typescript": "^4.9.4",
    "vite": "5.2.8",
    "vue-tsc": "^1.0.24"
  }

pages.json

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app",
				"usingComponents": {
					"van-nav-bar": "/wxcomponents/vant-ui/nav-bar/index"
				}
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

项目结构

./src
├── pages
│   └── index
├── static
└── wxcomponents
    ├── calendar-month
    ├── color-picker
    ├── vant-ui
    │   ├── action-sheet
    │   ├── area
    │   ├── button
    │   ├── cascader
    │   ├── cell
    │   ├── cell-group
    │   ├── checkbox
    │   ├── checkbox-group
    │   ├── circle
    │   ├── col
    │   ├── collapse
    │   ├── collapse-item
    │   ├── common
    │   │   └── style
    │   │       └── mixins
    │   ├── count-down
    │   ├── datetime-picker
    │   ├── definitions
    │   ├── dialog
    │   ├── divider
    │   ├── dropdown-item
    │   ├── dropdown-menu
    │   ├── empty
    │   ├── field
    │   ├── goods-action
    │   ├── goods-action-button
    │   ├── icon
    │   ├── image
    │   ├── image-group
    │   ├── info
    │   ├── loading
    │   ├── mixins
    │   ├── nav-bar
    │   ├── overlay
    │   ├── picker
    │   ├── picker-column
    │   ├── popup
    │   ├── progress
    │   ├── radio
    │   ├── radio-group
    │   ├── rate
    │   ├── row
    │   ├── search
    │   ├── sidebar
    │   ├── sidebar-item
    │   ├── stepper
    │   ├── sticky
    │   ├── swipe-cell
    │   ├── switch
    │   ├── tab
    │   ├── tabbar
    │   ├── tabbar-item
    │   ├── tabs
    │   ├── tag
    │   ├── toast
    │   ├── transition
    │   └── wxs
    └── we-ui
        ├── navigation-bar
        └── static
            └── icon

示例项目 https://github.com/zcgzxg/my-uniapp

现在wxcomponents已经可以复制到dist下了，但组件编译出来仍然不正确

<van-nav-bar wx:if="{{r0}}" u-t="m" u-i="d5ddc0dc-0" bind:__l="__l" u-p="{{a}}"></van-nav-bar>

Answer 3 · 2025-10-10T02:55:11.000Z

参考官方的示例工程和官方文档

Answer 4 · 2025-10-10T12:30:50.000Z

示例是vue2的项目，我是按照官方文档在vue3项目下测试的，还是不行。或者可以给个vue3的示例吗？

Answer 5 · 2025-10-10T12:47:46.000Z

我测试了一下，看起来组件都是能正常使用的

Answer 6 · 2025-10-24T03:31:40.000Z

还有问题的话可以继续留言，issue我先关闭了