DDEV Docker环境下TYPO3配置Vite遇main.js未找到错误

1. 修正Manifest模式下的资源引用逻辑 #

你已经开启了manifest: true，Vite会生成manifest.json文件，里面记录了带哈希后缀的实际产物文件名（比如main.abc123.js），绝对不能直接写死引用main.js，必须通过manifest文件动态获取正确路径。

在TYPO3的Fluid模板中，推荐使用官方Vite扩展的ViewHelper（需先安装typo3/cms-vite）：

{namespace v=TYPO3\CMS\Vite\ViewHelpers}
<!-- 自动区分环境：开发模式指向Vite Dev Server，生产模式读取manifest加载哈希文件 -->
<v:asset identifier="src/js/main.js" />

如果手动处理manifest，可通过PHP读取并生成正确路径：

$manifestPath = 'packages/colin_frontend/Resources/Public/Vite/manifest.json';
$manifest = json_decode(file_get_contents($manifestPath), true);
$mainJsRelativePath = $manifest['src/js/main.js']['file'];
// 模板中输出完整路径：/packages/colin_frontend/Resources/Public/Vite/{$mainJsRelativePath}

2. 完善DDEV端口映射与Vite Dev Server配置 #

配置DDEV端口转发 #

在DDEV项目的.ddev/config.yaml中添加端口映射，确保Vite的HMR端口能被外部访问：

web_extra_exposed_ports:
  - name: vite-hmr
    container_port: 5173
    http_port: 5173
    https_port: 5174

添加后执行ddev restart重启环境。

修正Vite服务器配置 #

在vite.website.js的server节点补充端口和站点域名，确保开发模式下资源地址正确：

server: {
  host: '0.0.0.0',
  port: 5173, // 和DDEV映射的端口保持一致
  origin: 'https://你的DDEV站点域名.ddev.site:5173', // 替换为实际站点域名
  watch: {
    usePolling: true
  }
},

3. 验证资源路径可访问性 #

• 生产环境：直接在浏览器访问https://你的DDEV站点域名.ddev.site/packages/colin_frontend/Resources/Public/Vite/main.xxx.js（替换为manifest中实际的文件名），确认能正常加载。如果无法访问，检查目录权限（确保DDEV容器能读取该目录），或TYPO3配置中是否误拦截了该路径。
• 开发环境：访问https://你的DDEV站点域名.ddev.site:5173/src/js/main.js，确认Vite Dev Server能返回资源。

4. 清除缓存 #

• 清除TYPO3缓存：后台执行「Flush all caches」，或命令行执行ddev typo3 cache:flush
• 强制刷新浏览器缓存：按Ctrl+Shift+R重载页面

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