vite与webpack使用区别

1. 静态资源处理

import.meta.url 包含了对于目前 ES 模块的绝对路径

new URL(url [, base])构造函数返回一个新创建的 URL 对象，如果url 是相对 URL，则会将 base 用作基准 URL。如果 url 是绝对 URL，则无论参数base是否存在，都将被忽略

new URL('../assets/images/home.png', import.meta.url).href

//在src/constants/menus.ts下引入图片
//import.meta.url返回 http://localhost:8080/src/constants/menus.ts

//new URL(...).href返回
//http://localhost:8080/src/assets/images/home.png

2. 组件自动化注册

webpack

<script>
    const path = require('path');
    //读取@/components/BaseEchartsModel下所有.vue文件
    const files = require.context('@/components/BaseEchartsModel', false, /\.vue$/);
    const modules = {};
    files.keys().forEach((key) => {
        const name = path.basename(key, '.vue');
        modules[name] = files(key).default || files(key);
    });
    export default {
        name: 'BaseEcharts',
        components: modules,
    };
</script>

vite

<script setup lang="ts">
    //读取@/components/BaseEchartsModel下所有.vue文件
    import.meta.glob('@/components/BaseEchartsModel/*.vue');
</script>