MMF-FE / vite-plugin-cdn-import

Import modules from CDN with vite plugin
MIT License
202 stars 29 forks source link

和unplugin-vue-components使用时,执行build会刷新components.d.ts导致组件没有编译 #54

Open AkenClub opened 1 month ago

AkenClub commented 1 month ago

``使用版本:"vite-plugin-cdn-import": "^1.0.1", "unplugin-vue-components": "^0.24.1", "vite": "^4.5.3", "vue": "^3.2.47",

dev没有问题,build才有问题。

<script setup lang="ts">
// 以为使用了 unplugin-vue-components 会自动导入 el-card,所以这里没有 import
</script>

<template>
  <el-card shadow="hover" header="(近十天)">
    ...
  </el-card>
</template>

<style scoped lang="scss"></style>

左边图是编译后自动少了Element相关组件

image

unplugin-vue-components配置
Components({
      resolvers: [
        // 自动导入 Element Plus 组件
        ElementPlusResolver(),
        // 自动注册图标组件
        IconsResolver(
          // https://github.com/antfu/unplugin-icons#auto-importing
          {
            // {prefix}-{collection}-{icon}
            // 默认前缀为 i,在 Element 图标前面加 IEp 加图标名 即可自动导入
            // prefix: 'icon',  // false 表示不用前缀
            // 自动添加 @iconify-json/ep 包,ep 代表 ElementPlus
            enabledCollections: ['ep'],
            // 自动导入自定义的图标集合,默认前缀下,为 IMine 加图标文件名
            customCollections: ['mine']
          }
        )
      ],
      dts: path.resolve(pathSrc, 'typings', 'components.d.ts'),
      dirs: [
        // 指定组件所在位置,默认为 src/components
        // 可以使用 glob 语法
        '*/**/components'
      ]
    })
vite-plugin-cdn-import 配置
import { Plugin as importToCDN } from 'vite-plugin-cdn-import'

export const cdnConfig = importToCDN({
  prodUrl: 'https://unpkg.com/{name}@{version}/{path}',
  modules: [
    {
      name: 'vue',
      var: 'Vue',
      path: 'dist/vue.global.prod.js'
    },
    {
      name: 'vue-router',
      var: 'VueRouter',
      path: 'dist/vue-router.global.js'
    },
    {
      name: 'vue-demi',
      var: 'VueDemi',
      path: 'lib/index.iife.js'
    },
    {
      name: 'pinia',
      var: 'Pinia',
      path: 'dist/pinia.iife.js'
    },
    {
      name: 'element-plus',
      var: 'ElementPlus',
      path: 'dist/index.full.min.js',
      css: 'dist/index.css'
    },
    {
      name: 'axios',
      var: 'axios',
      path: 'dist/axios.min.js'
    },
    {
      name: 'dayjs',
      var: 'dayjs',
      path: 'dayjs.min.js'
    },
    {
      name: 'echarts',
      var: 'echarts',
      path: 'dist/echarts.min.js'
    }
  ]
})
AkenClub commented 1 month ago

https://github.com/unplugin/unplugin-vue-components/issues/664 和这里的问题类似