vite

图片引入  components/img-import

// 在组件中使用
<template>
  <div>
    <img src="../assets/logo.png" />
    <img :src="getImageUrl('logo.png')" />
    <img :src="$getAssetsFile('logo.png')" />
    <img :src="imgSrc" />
  </div>
</template>

<script setup>
import {ref} from 'vue'
function getImageUrl(url) {
  return new URL(`/src/assets/${url}`, import.meta.url).href
}
const imgSrc = ref( $getAssetsFile('logo.png'))
</script>

// 
在main.js 配置

window.$getAssetsFile = app.config.globalProperties.$getAssetsFile = (url) => {
  return new URL(`/src/assets/img/${url}`, import.meta.url).href
}


-------------------------------
// vite.config.js配置别名

resolve: {
  alias: {
    "@": resolve(__dirname, "src"),
    "~@": resolve(__dirname, "src"),
    "/img": resolve(__dirname, "src/assets/img"),
  },
},

// 组件使用

<img src="/img/drone.png" alt="">

 按需加载 antDesignVue

import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

AntDesignVueResolver() // 按需加载，自动引入组件

 

配置icon

    Components({
      dts: true,
      resolvers: [
        AntDesignVueResolver(), // 按需加载，自动引入组件
        
        IconsResolver({
          prefix: false,
          customCollections: ['svg'],
        })
      ]
    }),
    Icons({
      compiler: 'vue3',
      scale: 1.2,
      defaultClass: '',
      defaultStyle: 'width:20px;height:20px;fill: #666;',
      customCollections: {
        svg: FileSystemIconLoader('./src/assets/svg'),
      }
    }),

// src/assets/svg   放入项目需要的svg文件