AI取名大师 | uni-app 微信小程序打包 v-bind、component 动态组件问题

关于 AI 取名大师

借助豆包、通义千问、DeepSeek 等 AI 大模型，为您的宝宝、宠物、店铺、网名、笔名、项目、产品、服务、文章等取一个专业、有意义的名字😄。

开源地址：👉GitCode（国内友好）👈、👉GitHub👈

技术组合：Bun.js、Elysia.js、uni-app

体验地址：AI取名大师（H5版）

特别注明：本系列文章仅为实战经验分享，并记录开发过程中碰到的问题😄，如有不足之处欢迎随时留言提出。

v-bind / 属性绑定

直接上代码：

html 复制代码

<template>
	<view :title />
</template>

<script setup>
	let title = "标题"
</script>

这是一个再简单不过的 Vue3 示例，使用了绑定属性缩写，非常简洁清爽！编译为 h5 完全没问题，但是编译成微信小程序就会报错：

shell 复制代码

正在编译中...
✗ Build failed in 1.02s
[vite:vue] v-bind is missing expression.

2  |      <view @click="create" class="inline">
3  |          <slot>
4  |              <wd-button :icon="icon" :size="size" :type>创建积分券</wd-button>
   |                                         ^^^^^
5  |          </slot>
6  |      </view>

简单说就是微信小程序环境下不支持绑定缩写😔，只能一个个修给出:title="title"的形式，心累。如果需要多端支持，写代码时就得注意。

component is not supported

原始代码：

html 复制代码

<template>
	<component :is='buildSVG(bean)' />
</template>

<script setup>
	const buildSVG = item=>{
        let { color, svg, fill } = item.icon || {}
        if(svg && svg.startsWith("<svg "))
            return h('view', {class:"icon", innerHTML: svg })

        return h(
            item.id == 'baobao'? BabySVG:
            item.id == 'dianpu'? ShopSVG:
            item.id == 'chongwu'? DogSVG:
            item.id == 'wangming'? VestSVG:
            item.id == 'biming'? EditSVG:
            item.id == 'zuopin'? CreationSVG:
            item.id == 'wenzhang'? TitleSVG:
            null,
            { clazz:'icon', fill: fill || color, size: props.iconSize }
        )
    }
</script>

由于·微信小程序·的自定义组件系统不支持 <component is="">，也不支持 Vue 的动态组件渲染。

所以只能改成条件判断。

html 复制代码

<template>
    <template v-if="inited">
        <view v-if="custom" class="icon" :innerHTML="bean.icon.svg" />
        <BabySVG v-if="bean.id=='baobao'" :fill="fill" :color="color" :size="size" clazz='icon' />
        <ShopSVG v-else-if="bean.id=='dianpu'" :fill="fill" :color="color" :size="size" clazz='icon' />
        <DogSVG v-else-if="bean.id=='chongwu'" :fill="fill" :color="color" :size="size" clazz='icon' />
        <VestSVG v-else-if="bean.id=='wangming'" :fill="fill" :color="color" :size="size" clazz='icon' />
        <EditSVG v-else-if="bean.id=='biming'" :fill="fill" :color="color" :size="size" clazz='icon' />
        <CreationSVG v-else-if="bean.id=='zuopin'" :fill="fill" :color="color" :size="size" clazz='icon' />
        <TitleSVG v-else-if="bean.id=='wenzhang'" :fill="fill" :color="color" :size="size" clazz='icon' />
        <view v-else />
    </template>
</template>

<script setup>
    import BabySVG from '@SVG/baby.vue'
    import ShopSVG from '@SVG/shop.vue'
    import DogSVG from '@SVG/dog.vue'
    import EditSVG from '@SVG/edit.vue'
    import CreationSVG from '@SVG/creation.vue'
    import VestSVG from '@SVG/vest.vue'
    import TitleSVG from '@SVG/title.vue'

    const props = defineProps({
        bean:{type:Object, default:{}},
        size:{type:Number, default:48}
    })

    let inited = ref(false)
    let fill
    let color
    let custom = false

    onMounted(() => {
        let { svg } = props.bean.icon || {}
        if(svg && svg.startsWith("<svg "))
            custom = true

        fill = props.bean.icon?.fill
        color = props.bean.icon?.color

        inited.value = true
    })
</script>

Invalid pattern

shell 复制代码

Invalid pattern "../node-modules/wot-design-uni/components/wd-navbar/wd-navbar.js" for "output.chunkFileNames", patterns can be neither absolute nor relative paths. If you want your files to be stored in a subdirectory, write its name without a leading slash like this: subdirectory/pattern.

原因不明，删除 node_modules后，重新bun i就能正常打包😔。