Laravel 9中TypeScript无法编译public目录文件的问题求助

问题描述 #

新建 Laravel 9 项目并安装 TypeScript，修改 vite.config.js 指向 app.ts 后运行正常，但在视图中引入 /public/js/index.ts 时出现错误：

Refused to execute script from 'http://127.0.0.1:8000/js/index.ts' because its MIME type ('video/mp2t') is not executable.

浏览器能加载该文件，但将后缀改为 .js 就一切正常，推测 TypeScript 未编译此文件，但不清楚原因。

现有配置文件 #

tsconfig.json #

{
    "compilerOptions": {
      "target": "es5",
      "module": "es2020",
      "moduleResolution": "node",
      "baseUrl": "./",
      "strict": true,                 
      "skipLibCheck": true,           
      "noImplicitAny": false,          
      "allowSyntheticDefaultImports": true,
    },
    "include": ["/public/js/**/*", "/resources/js/**/*"],  
}

vite.config.js #

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/scss/app.scss', 'resources/js/app.ts'],
            refresh: true,
        }),
    ],
    resolve:{
        alias: {
            "$": "jQuery"
        },

    }
});

问题原因与解决方案 #

核心原因 #

1. Vite 不处理 public 目录下的编译：Vite 默认只编译 resources 目录下的入口文件，public 目录的文件会直接作为静态资源返回，不会经过 TypeScript 编译流程，浏览器无法直接执行 .ts 文件，因此触发 MIME 类型错误。
2. 入口配置未包含 index.ts：当前 vite.config.js 仅将 resources/js/app.ts 设为入口，public/js/index.ts 不在编译范围内。

解决步骤 #

1. 迁移文件到规范目录：将 public/js/index.ts 移动到 resources/js/ 目录，遵循 Laravel + Vite 的资源管理规则。
2. 更新 Vite 入口配置：修改 vite.config.js 的 input 数组，添加新增的 index.ts：

   laravel({
       input: [
           'resources/css/app.css', 
           'resources/scss/app.scss', 
           'resources/js/app.ts',
           'resources/js/index.ts' // 新增该行
       ],
       refresh: true,
   }),
   

3. 视图中正确引入编译后文件：使用 Laravel 的 @vite 指令引入，而非直接写静态路径：

   @vite('resources/js/index.ts')
   

4. 验证编译结果：运行 npm run dev 或 npm run build，Vite 会自动将 index.ts 编译为 JS 文件，@vite 指令会生成正确的资源链接。

可选优化 #

调整 tsconfig.json 的 include 路径，移除 /public/js/**/*，因为该目录下的文件无需 TypeScript 编译：

"include": ["/resources/js/**/*"],  

内容的提问来源于stack exchange，提问作者Henry White