{"id":607,"date":"2025-12-07T10:17:05","date_gmt":"2025-12-07T02:17:05","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=607"},"modified":"2025-12-07T10:17:05","modified_gmt":"2025-12-07T02:17:05","slug":"vue%e5%89%8d%e7%ab%af%e5%8a%a8%e6%80%81%e5%af%bc%e5%85%a5%e6%96%87%e4%bb%b6%e4%b9%8bimport-meta-glob%e5%af%bc%e5%85%a5%e5%9b%be%e7%89%87%e8%af%a6%e7%bb%86%e8%bf%87%e7%a8%8b","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/12\/07\/vue%e5%89%8d%e7%ab%af%e5%8a%a8%e6%80%81%e5%af%bc%e5%85%a5%e6%96%87%e4%bb%b6%e4%b9%8bimport-meta-glob%e5%af%bc%e5%85%a5%e5%9b%be%e7%89%87%e8%af%a6%e7%bb%86%e8%bf%87%e7%a8%8b\/","title":{"rendered":"vue\u524d\u7aef\u52a8\u6001\u5bfc\u5165\u6587\u4ef6\u4e4bimport.meta.glob\u5bfc\u5165\u56fe\u7247\u8be6\u7ec6\u8fc7\u7a0b"},"content":{"rendered":"\n

\u4e0b\u9762\u7ed9\u4f60\u4e00\u4efd\u6700\u5b8c\u6574\u3001\u6700\u6e05\u6670\u3001\u9002\u5408\u6536\u85cf\u7684\u300aVue \u524d\u7aef\u52a8\u6001\u5bfc\u5165\u6587\u4ef6\u4e4b import.meta.glob \u5bfc\u5165\u56fe\u7247\u8be6\u7ec6\u8fc7\u7a0b\u300b<\/strong>\u3002
\u652f\u6301 Vue3 + Vite<\/strong>\uff0c\u5e76\u5305\u542b\u771f\u5b9e\u9879\u76ee\u5199\u6cd5\u3001\u8e29\u5751\u8bf4\u660e\u3001\u6700\u4f73\u5b9e\u8df5\u3002<\/p>\n\n\n\n

\n\n\n\n

\ud83d\ude80 \u4e00\u6587\u5b8c\u5168\u641e\u61c2 import.meta.glob \u52a8\u6001\u5bfc\u5165\u56fe\u7247\uff08Vue3 \/ Vite\uff09<\/h1>\n\n\n\n

import.meta.glob<\/code> \u662f Vite \u63d0\u4f9b\u7684\u5f3a\u5927\u529f\u80fd\uff0c\u53ef\u7528\u4e8e\u52a8\u6001\u6279\u91cf\u5bfc\u5165\u6587\u4ef6<\/strong>\uff0c\u5305\u62ec\uff1a<\/p>\n\n\n\n

    \n
  • \u56fe\u7247\uff08PNG\u3001JPG\u3001SVG\u3001GIF\u2026\uff09<\/li>\n\n\n\n
  • JSON<\/li>\n\n\n\n
  • Markdown<\/li>\n\n\n\n
  • \u7ec4\u4ef6<\/li>\n\n\n\n
  • \u4efb\u4f55\u9759\u6001\u8d44\u6e90<\/li>\n<\/ul>\n\n\n\n

    \u5c24\u5176\u9002\u7528\u4e8e\uff1a<\/p>\n\n\n\n

    \u2714 \u56fe\u7247\u6570\u91cf\u591a
    \u2714 \u56fe\u7247\u6587\u4ef6\u540d\u52a8\u6001
    \u2714 \u4e0d\u60f3\u4e00\u5f20\u4e00\u5f20 import
    \u2714 \u9700\u8981\u6839\u636e\u7528\u6237\u9009\u62e9\u52a8\u6001\u52a0\u8f7d<\/p>\n\n\n\n

    \n\n\n\n

    \ud83d\udccc 1. \u57fa\u7840\u6982\u5ff5\uff1a\u4ec0\u4e48\u662f import.meta.glob\uff1f<\/h1>\n\n\n\n

    Vite \u8bed\u6cd5\uff1a<\/h3>\n\n\n
    \nconst modules = import.meta.glob('.\/assets\/*.png');\n\n<\/pre><\/div>\n\n\n
    \u8fd4\u56de\uff1a<\/p>\n\n\n
    \n{\n  '.\/assets\/a.png': () => import('.\/assets\/a.png'),\n  '.\/assets\/b.png': () => import('.\/assets\/b.png'),\n  ...\n}\n\n<\/pre><\/div>\n\n\n
    \ud83d\udc49 \u8fd4\u56de\u7684\u662f\u4e00\u4e2a\u5bf9\u8c61\uff0cvalue \u662f\u4e00\u4e2a\u52a8\u6001 import \u51fd\u6570\u3002<\/strong><\/p>\n\n\n\n
    \u4f60\u9700\u8981\u624b\u52a8\u8c03\u7528\u5b83\u624d\u80fd\u83b7\u53d6\u56fe\u7247\u7684\u6700\u7ec8 URL\u3002<\/p>\n\n\n\n
    \n\n\n\n
    \ud83d\udccc 2. \u6b63\u786e\u7528\u6cd5\uff1a\u6279\u91cf\u5bfc\u5165\u6240\u6709\u56fe\u7247<\/h1>\n\n\n\n
    \u793a\u4f8b\u76ee\u5f55\u7ed3\u6784\uff1a<\/h2>\n\n\n
    \nsrc\/\n \u2514\u2500 assets\/\n      \u251c\u2500 1.png\n      \u251c\u2500 2.png\n      \u251c\u2500 3.png\n\n<\/pre><\/div>\n\n\n
    Vue3 \u5bfc\u5165\uff1a<\/h2>\n\n\n
    \nconst images = import.meta.glob('@\/assets\/*.png', { eager: true });\n\n<\/pre><\/div>\n\n\n
    \ud83d\udc49 \u5173\u952e\u70b9\uff1a
    eager: true<\/code> \u4f1a\u76f4\u63a5\u8fd4\u56de\u5bfc\u5165\u7ed3\u679c\uff0c\u800c\u4e0d\u662f\u51fd\u6570\u3002<\/p>\n\n\n\n
    \u7ed3\u679c\u7ed3\u6784\uff1a<\/p>\n\n\n
    \n{\n  '\/src\/assets\/1.png': { default: '\/assets\/1.abc123.png' },\n  '\/src\/assets\/2.png': { default: '\/assets\/2.e2e90ac.png' }\n}\n\n<\/pre><\/div>\n\n\n
    \u83b7\u53d6\u56fe\u7247 URL\uff1a<\/h2>\n\n\n
    \nconst imageUrls = Object.keys(images).map(key => images[key].default);\n\n<\/pre><\/div>\n\n\n
    \ud83d\udccc imageUrls \u5c31\u662f\u4f60\u771f\u6b63\u80fd\u653e\u5728 :src \u4e2d\u7684\u56fe\u7247 URL \u5217\u8868\u3002<\/strong><\/p>\n\n\n\n
    \n\n\n\n
    \ud83d\udccc 3. \u5728\u6a21\u677f\u4e2d\u4f7f\u7528\u56fe\u7247<\/h1>\n\n\n\n
    \u4f8b\u5982\u5faa\u73af\u6e32\u67d3\u56fe\u7247\uff1a<\/p>\n\n\n
    \n&lt;template>\n  &lt;div v-for="(img, i) in imageUrls" :key="i">\n    &lt;img :src="img" \/>\n  &lt;\/div>\n&lt;\/template>\n\n&lt;script setup>\nconst images = import.meta.glob('@\/assets\/*.png', { eager: true });\nconst imageUrls = Object.keys(images).map(key => images[key].default);\n&lt;\/script>\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \ud83d\udccc 4. \u6309\u6587\u4ef6\u540d\u52a8\u6001\u9009\u62e9\u56fe\u7247\uff08\u975e\u5e38\u5e38\u7528\uff09<\/h1>\n\n\n\n
    \u6bd4\u5982\u7528\u6237\u9009\u62e9\u7684\u56fe\u7247\u7f16\u53f7\u662f 3\uff0c\u5e0c\u671b\u52a0\u8f7d 3.png<\/code>\u3002<\/p>\n\n\n\n
    \u52a8\u6001\u5339\u914d\uff1a<\/h2>\n\n\n
    \nconst modules = import.meta.glob('@\/assets\/*.png', { eager: true });\n\nfunction getImage(name) {\n  for (const path in modules) {\n    if (path.includes(name)) {\n      return modules[path].default;\n    }\n  }\n}\n\n<\/pre><\/div>\n\n\n
    \u4f7f\u7528\uff1a<\/p>\n\n\n
    \n&lt;img :src="getImage('3')" \/>\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \ud83d\udccc 5. \u66f4\u4f18\u96c5\u7684\u65b9\u5f0f\uff1a\u5c06\u6587\u4ef6\u540d\u4f5c\u4e3a key<\/h1>\n\n\n
    \nconst images = import.meta.glob('@\/assets\/*.png', { eager: true });\n\nconst map = {};\n\nObject.entries(images).forEach(([path, mod]) => {\n  const fileName = path.split('\/').pop();\n  map[fileName] = mod.default;\n});\n\nexport default map;\n\n<\/pre><\/div>\n\n\n
    \u4f7f\u7528\uff1a<\/p>\n\n\n
    \n&lt;img :src="map['3.png']" \/>\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \ud83d\udccc 6. \u4e5f\u53ef\u4ee5\u6309\u76ee\u5f55\u9012\u5f52\u5bfc\u5165<\/h1>\n\n\n
    \nconst images = import.meta.glob('@\/assets\/**', { eager: true });\n\n<\/pre><\/div>\n\n\n
    \u5339\u914d\u6240\u6709\u5b50\u76ee\u5f55\u3002<\/p>\n\n\n\n
    \n\n\n\n
    \ud83d\udccc 7. \u52a8\u6001 import\uff08\u61d2\u52a0\u8f7d\u56fe\u7247\uff09<\/h1>\n\n\n\n
    \u5f53 { eager: false }<\/code> \u6216\u9ed8\u8ba4\u60c5\u51b5\uff1a<\/p>\n\n\n
    \nconst modules = import.meta.glob('@\/assets\/*.png');\n\nasync function loadImage(name) {\n  for (const key in modules) {\n    if (key.includes(name)) {\n      const mod = await modules[key]();\n      return mod.default;\n    }\n  }\n}\n\n<\/pre><\/div>\n\n\n
    \u52a8\u6001\u8c03\u7528\uff1a<\/p>\n\n\n
    \n&lt;img :src="img" v-if="img" \/>\n\n&lt;script setup>\nconst img = ref(null);\nloadImage('2').then(res => img.value = res);\n&lt;\/script>\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \ud83d\udccc 8. import.meta.glob \u5bfc\u5165\u56fe\u7247\u5e38\u89c1\u5751<\/h1>\n\n\n\n
    \n\n\n\n
    \u274c \u9519\u8bef 1\uff1a\u8def\u5f84\u5fc5\u987b\u662f\u9759\u6001\u5b57\u7b26\u4e32\uff0c\u4e0d\u652f\u6301\u53d8\u91cf<\/h2>\n\n\n
    \n\/\/ \u274c \u9519\u8bef\nimport.meta.glob(`@\/assets\/${dir}\/*.png`);\n\n<\/pre><\/div>\n\n\n
    \u5fc5\u987b\u5199\u6210\uff1a<\/p>\n\n\n
    \n\/\/ \u2714 \u6b63\u786e\nimport.meta.glob('@\/assets\/**\/*.png');\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \u274c \u9519\u8bef 2\uff1aimport.meta.glob \u4e0d\u652f\u6301 Webpack<\/h2>\n\n\n\n
    \u53ea\u6709 Vite \u9879\u76ee\u80fd\u7528\u3002<\/strong>
    Vue2 + Webpack \u7684\u4eba\u8981\u7528 require.context()<\/code>\u3002<\/p>\n\n\n\n
    \n\n\n\n
    \u274c \u9519\u8bef 3\uff1a\u76f4\u63a5\u653e\u5230 template \u4f1a\u62a5\u9519<\/h2>\n\n\n\n
    \u4e0d\u80fd\uff1a<\/p>\n\n\n
    \n&lt;img :src="import.meta.glob(...)" \/>  \/\/ \u274c\n\n<\/pre><\/div>\n\n\n
    \u5fc5\u987b\u653e\u5728 script \u4e2d\u751f\u6210 URL\u3002<\/p>\n\n\n\n
    \n\n\n\n
    \u274c \u9519\u8bef 4\uff1apublic \u6587\u4ef6\u5939\u4e0d\u9700\u8981 glob<\/h2>\n\n\n\n
    public \u7684\u8d44\u6e90\u76f4\u63a5\u4f7f\u7528\uff1a<\/p>\n\n\n
    \n\/image\/banner.png\n\n<\/pre><\/div>\n\n\n
    \u4e0d\u9700\u8981 import.meta.glob\u3002<\/p>\n\n\n\n
    \n\n\n\n
    \ud83d\udccc 9. \u5b9e\u6218\u793a\u4f8b\uff1a\u52a8\u6001\u4e3b\u9898\u3001\u76ae\u80a4\u3001\u5361\u7247\u8d44\u6e90\u52a0\u8f7d<\/h1>\n\n\n\n
    \u5e38\u7528\u4e8e\u6e38\u620f\u3001\u540e\u53f0\u4e3b\u9898\u3001\u6a21\u677f\u7cfb\u7edf\uff1a<\/p>\n\n\n
    \nconst skins = import.meta.glob('@\/skins\/**\/*.png', { eager: true });\n\nconst skinMap = {};\nfor (const key in skins) {\n  const fileName = key.slice(key.lastIndexOf('\/') + 1);\n  skinMap[fileName] = skins[key].default;\n}\n\n<\/pre><\/div>\n\n\n
    \u6839\u636e\u7528\u6237\u9009\u62e9\uff1a<\/p>\n\n\n
    \n&lt;img :src="skinMap[user.skin + '.png']" \/>\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \ud83d\udccc 10. \u6700\u7ec8\u603b\u7ed3\uff1aimport.meta.glob \u7528\u6765\u5e72\u4ec0\u4e48\uff1f<\/h1>\n\n\n\n
    \u529f\u80fd<\/th>\u4f7f\u7528\u8bf4\u660e<\/th><\/tr><\/thead>
    \u6279\u91cf\u5bfc\u5165\u56fe\u7247<\/td>\u2714 \u6700\u5e38\u7528<\/td><\/tr>
    \u52a8\u6001\u5339\u914d\u5e76\u8fd4\u56de URL<\/td>\u2714 getImage(name)<\/td><\/tr>
    \u6309\u9700\u61d2\u52a0\u8f7d\u56fe\u7247<\/td>\u2714 \u52a8\u6001 import<\/td><\/tr>
    \u6e32\u67d3\u5927\u91cf\u9759\u6001\u8d44\u6e90<\/td>\u2714 \u6bd4\u624b\u52a8 import \u5feb\u5f97\u591a<\/td><\/tr>
    \u751f\u6210\u201c\u6587\u4ef6\u540d \u2192 URL\u201d\u6620\u5c04\u8868<\/td>\u2714 \u540e\u53f0\u7ba1\u7406\u9879\u76ee\u5e38\u7528<\/td><\/tr>
    \u81ea\u52a8\u5316\u5bfc\u5165 JSON\/Markdown\/\u7ec4\u4ef6<\/td>\u2714 \u6587\u6863\u7cfb\u7edf\u5e38\u7528<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"
    \u4e0b\u9762\u7ed9\u4f60\u4e00\u4efd\u6700\u5b8c\u6574\u3001\u6700\u6e05\u6670\u3001\u9002\u5408\u6536\u85cf\u7684\u300aVue \u524d\u7aef\u52a8\u6001\u5bfc\u5165\u6587\u4ef6\u4e4b import… Continue Reading →<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49],"tags":[],"class_list":["post-607","post","type-post","status-publish","format-standard","hentry","category-javascript"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/607","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=607"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/607\/revisions"}],"predecessor-version":[{"id":608,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/607\/revisions\/608"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=607"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=607"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=607"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}