feat: vite-assets

eslint.config.ts

@@ -71,6 +71,7 @@ export default defineConfigWithVueTs(
       'unicorn/no-null': 'off',
       'unicorn/no-useless-spread': 'off',
       'unicorn/prevent-abbreviations': 'off',
+      'unicorn/relative-url-style': 'off', // [plugin:vite:import-glob] Invalid glob: "imgs/*.png" (resolved: "imgs/*.png"). It must start with '/' or './'
     },
   },
   // endregion <<< eslint-plugin-unicorn <<<

src/pages/Page/vite-assets/index.page.vue

@@ -0,0 +1,46 @@
+<!--
+ https://cn.vitejs.dev/guide/#new-url-url-import-meta-url
+-->
+<script setup lang="ts">
+function getImageUrl(name: string) {
+  return new URL(`./imgs/img_${name}.png`, import.meta.url).href;
+}
+
+const img_modules = import.meta.glob<{ default: string }>('./imgs/*.png', { eager: true });
+</script>
+
+<template>
+  <div>
+    <div b="1px solid pink">
+      getImageUrl('1'): {{ getImageUrl('1') }}
+      <img :src="getImageUrl('1')" alt="img_1" />
+    </div>
+    <br />
+    <div b="1px solid pink">
+      getImageUrl('2'): {{ getImageUrl('2') }}
+      <img :src="getImageUrl('2')" alt="img_2" />
+    </div>
+  </div>
+  <div class="space-y-4" p="4" b="1px solid pink" mt-4>
+    <h3>img_modules</h3>
+    <div v-for="(img, name) in img_modules" :key="name" b="1px solid pink">
+      <p>name: {{ name }}</p>
+      <img :src="img.default" :alt="name" />
+    </div>
+    <pre class="text-left">img_modules :>> {{ JSON.stringify(img_modules, null, 2) }}</pre>
+  </div>
+</template>
+
+<style scoped>
+img {
+  border: 1px solid #eee;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  max-width: 100%;
+  height: 40px;
+}
+pre {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+</style>

typed-router.d.ts

@@ -36,6 +36,7 @@ declare module 'vue-router/auto-routes' {
     'PageMDPage': RouteRecordInfo<'PageMDPage', '/Page/MDPage', Record<never, never>, Record<never, never>>,
     'PageP5Js': RouteRecordInfo<'PageP5Js', '/Page/p5_js', Record<never, never>, Record<never, never>>,
     'PageStyle': RouteRecordInfo<'PageStyle', '/Page/Style', Record<never, never>, Record<never, never>>,
+    'PageViteAssets': RouteRecordInfo<'PageViteAssets', '/Page/vite-assets', Record<never, never>, Record<never, never>>,
     'PkgsUsageI18n': RouteRecordInfo<'PkgsUsageI18n', '/PkgsUsage/I18n', Record<never, never>, Record<never, never>>,
     'PkgsUsageTsEnumUtil': RouteRecordInfo<'PkgsUsageTsEnumUtil', '/PkgsUsage/ts-enum-util', Record<never, never>, Record<never, never>>,
     'UIComponentsAntdV': RouteRecordInfo<'UIComponentsAntdV', '/UI-components/AntdV', Record<never, never>, Record<never, never>>,