Vite项目npm run build后资源路径错误致MIME类型报错求助

问题根源 #

构建后生成的资源用了绝对路径（比如/vite.svg），但本地直接打开dist（CRA是build）文件夹里的HTML时，绝对路径会指向系统根目录而非项目构建目录，自然找不到资源引发404；同时服务器会把找不到的资源返回成HTML，导致样式文件的MIME类型变成text/html，浏览器拒绝应用样式。而npm run dev正常是因为开发服务器运行在域名根路径下，绝对路径能正确匹配资源。

解决方案 #

针对Vite项目 #

修改项目根目录下的vite.config.js，添加base: './'配置，将公共路径设为相对路径：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: './' // 关键配置：切换为相对公共路径
})

针对Create React App项目 #

在项目根目录的package.json中添加"homepage": "."字段：

{
  "name": "your-app-name",
  "version": "0.1.0",
  "homepage": ".", // 添加该行配置
  // ...其他原有配置
}

或者在项目根目录创建.env文件，添加如下配置：

PUBLIC_URL=.

验证方法 #

修改配置后重新执行npm run build，打开构建生成的HTML文件，会发现资源路径已经变成./vite.svg这类相对路径，此时资源能正常加载，404和MIME类型错误都会消失。

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