为现有HTML/JS项目集成Vite后构建运行异常求助

问题根源分析 #

从报错信息来看，核心问题是资源路径不匹配：

• 构建后的JS、CSS、SVG资源请求路径错误，导致404
• CSS请求返回404页面（HTML格式），触发了MIME类型不匹配的报错

主要诱因是Vite默认的绝对路径配置，以及静态服务器的根目录设置错误。

解决方案 #

1. 修改Vite配置，启用相对路径 #

Vite默认base参数为/（绝对路径），本地打开构建后的文件时，会从服务器根目录寻找资源，而非当前dist目录。需要在vite.config.js中添加base: './'：

import { defineConfig } from 'vite';

export default defineConfig({
     root: 'uisource',
     base: './', // 添加相对路径配置
     build: {
          outDir: '../dist',
     },
});

修改后重新执行npm run build，构建后的资源引用会自动转为相对路径，适配本地静态服务器的访问逻辑。

2. 确保静态服务器以dist为根目录 #

如果直接打开dist/index.html，或服务器根目录未指向dist，会导致资源路径错位：

• 使用http-server时，执行命令：npx http-server dist
• 使用VS Code Live Server时，右键dist/index.html选择「Open with Live Server」，或在设置中将liveServer.settings.root设为./dist

3. 验证本地文件路径正确性 #

检查uisource目录下的文件结构：

• 确认assets/css/style.css、assets/js/main.js、images/eye.svg等文件确实存在
• HTML中的资源引用路径需与实际文件结构一致，比如<img src="./images/eye.svg" />对应uisource/images/eye.svg

验证步骤 #

1. 修改vite.config.js后重新执行构建
2. 以dist为根目录启动静态服务器
3. 访问页面，检查控制台是否还有资源报错

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