# 1. 静态资源处理
| 工具 | 备注 |
|---|---|
| webpack | 使用 require 处理 |
| vite | 使用 new URL(url, import.meta.url).href 处理 |
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> |
