本地服务器运行正常，npx vite build后网站无法工作

问题描述 #

本地开发时Vite服务器运行正常，但执行npx vite build构建完成后，用npx serve启动生产环境网站时，每秒出现60个新错误，Three.js背景渲染完全失效。核心报错包括：

• Uncaught TypeError: cc is undefined index-5LnSVFjA.js:3999:3205
• 尝试改用CDN导入模块时，出现Loading module from “http://localhost:3000/node_modules/three/build/three.js” was blocked because of a disallowed MIME type (“text/html”).

相关代码与文件结构 #

HTML代码 #

<head>
    <meta charset="utf-8">
    <title>NeuroCatalyst</title>
    <link rel="stylesheet" href="style.css">
    <base href="/">
    <script type="importmap"> {
            "imports": {
                "three": "/node_modules/three/build/three.js",
                "three/addons/": "/node_modules/three/examples/jsm/",
                "three/nodes": "/node_modules/three/examples/jsm/nodes/Nodes.js"
            }
        }
        </script>
    <script defer type="module" src="script.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Major+Mono+Display&display=swap" rel="stylesheet">
  </head>

JS代码 #

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';

文件结构 #

解决方案 #

1. 移除importmap配置 #

Vite会自动处理模块解析与打包，手动添加的importmap是问题根源：生产环境下node_modules不会被打包到dist目录，浏览器请求/node_modules/three/build/three.js时会返回404错误页（表现为MIME类型不匹配）。直接删除HTML中的<script type="importmap">块即可。

2. 确认Three.js依赖安装 #

确保已通过官方命令安装Three.js：

npm install three

你的JS导入语句无需修改，Vite会自动将Three.js及其插件打包进最终产物。

3. 清理缓存重新构建 #

执行以下命令清理旧构建文件并重新打包：

rm -rf dist
npx vite build

4. 适配部署路径（可选） #

如果部署在子路径下，需要在vite.config.js中配置base字段，例如：

// vite.config.js
export default {
  base: '/your-subdirectory/'
}

同时保持HTML中的<base href="/your-subdirectory/">与之对应。

修改后的HTML头部示例：

<head>
    <meta charset="utf-8">
    <title>NeuroCatalyst</title>
    <link rel="stylesheet" href="style.css">
    <base href="/">
    <script defer type="module" src="script.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Major+Mono+Display&display=swap" rel="stylesheet">
  </head>

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