Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
AkenClub opened this issue Aug 13, 2024 · 2 comments

Comments

@AkenClub
Copy link

``使用版本:"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
Copy link
Author

@jiayou
Copy link

jiayou commented Oct 15, 2024

+1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants