部署Vite项目到Hostinger时CDN及资源导入错误求助

一、修复404错误 #

1. 替换版本占位符 #

你importmap里的<version>是占位符，必须替换成实际版本号，比如Three.js用0.158.0，GSAP用和你CDN引入一致的3.11.4。

2. 修正GSAP的CDN路径 #

unpkg.com/browse/是网页浏览路径，不是可直接加载的资源路径，要去掉browse前缀，直接使用资源文件的URL。

3. 补充@theatre/core的importmap配置 #

代码里导入了@theatre/core.js，但importmap未配置对应路径，需要补充进去，同时代码里的导入要去掉.js后缀。

修正后的importmap示例：

<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.158.0/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.158.0/examples/jsm/",
      "gsap": "https://unpkg.com/gsap@3.11.4/src/gsap-core.js",
      "gsap/": "https://unpkg.com/gsap@3.11.4/src/",
      "@theatre/core": "https://unpkg.com/@theatre/core@0.7.0/dist/index.esm.js"
    }
  }
</script>

4. 移除重复的GSAP全局脚本 #

你同时用了CDN引入全局GSAP脚本和importmap导入ES模块，会造成冲突，建议删掉前面4个GSAP的<script>标签，只保留importmap的模块导入方式。

二、修复MIME类型错误 #

直接import图片、JSON文件时，浏览器会把它们当作JavaScript模块处理，导致MIME类型不匹配，需改用正确的加载方式：

1. 加载JSON文件 #

不要用import，改用fetch异步加载：

// 替换原import语句
let state;
fetch("https://gramophone-frezy.s3.eu-central-1.amazonaws.com/bestR.json")
  .then(res => res.json())
  .then(data => {
    state = data;
    // 在这里执行依赖state的逻辑
  });

2. 加载图片资源 #

基于你使用Three.js的场景，用TextureLoader加载图片，而非import：

// 替换原图片import语句
const textureLoader = new THREE.TextureLoader();
const soundTexture = textureLoader.load("sound.png");
const sound2Texture = textureLoader.load("sound2.png");

如果是普通DOM图片，用new Image()创建并设置src即可。

三、额外注意事项 #

• Hostinger服务器默认已配置正确的MIME类型，无需额外调整，核心问题还是资源导入方式不符合浏览器原生模块规范。
• Vite本地开发会自动转译非JS资源的导入，但部署到CDN时没有Vite的转译支持，必须使用浏览器原生支持的加载方式。

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