TypeScript中ImportMeta无glob属性报错：Laravel+Vite静态资源打包问题

1. 修复 import.meta.glob 的 TypeScript 报错 #

TypeScript 默认不识别 Vite 扩展的 import.meta.glob，需要补充类型定义：

• 在项目根目录创建 env.d.ts 文件，写入：

/// <reference types="vite/client" />

• 打开 tsconfig.json，将该文件加入 include 数组，确保 TypeScript 能读取到：

{
  "include": [
    "resources/ts/**/*",
    "env.d.ts"
  ]
}

2. 正确配置静态图片的打包逻辑 #

你之前的 glob 路径写法有误，且必须让 Vite 识别到资源才会进行打包处理：

批量导入图片资源 #

如果要批量处理 resources/img 下的所有图片，修改 app.ts 中的代码：

// 用**/*匹配所有子目录及文件，eager设为true直接导入所有资源
const images = import.meta.glob('../img/**/*', { eager: true });

若要在 Blade 模板中使用这些图片，可以将路径挂载到全局对象：

// 单个导入logo示例
import logo from '../img/logo.png';

// 挂载到window，方便Blade调用
window.assetUrls = {
  logo: logo
};

之后在 Blade 中这样使用：

<img src="{{ $assetUrls['logo'] }}" />

避免直接用 Vite::asset 引用资源 #

Vite::asset('resources/images/logo.png') 这种写法不会触发 Vite 的资源处理逻辑，必须让图片被入口文件（app.ts）或 CSS 文件引用，Vite 才会对其打包并生成带哈希的正确路径。比如在 CSS 中用 url('../img/logo.png')，或者在 TS 中导入图片，Vite 都会自动处理。

3. 解决图片路径显示为JS后缀的问题 #

出现 logo.a766f7e6.js 这类错误后缀，是因为 Vite 没有正确识别这是图片资源。只要按照上述方法让图片被 TS/CSS 正确引用，Vite 就会为其生成 .png 后缀的合法路径。

内容的提问来源于stack exchange，提问作者Muhammad Tahir Qaiser