Vite无法加载public目录（dist）下的CSS文件问题求助

问题背景 #

项目结构如下：

├── README.md
├── dist
│   ├── components
│   │   ├── checkbox.css
│   │   └── input.css
│   ├── styles.css
│   └── styles.js
├── docs
│   ├── index.html
│   ├── main.css
│   ├── package.json
│   ├── tailwind.config.js
│   ├── vite.config.js
│   └── yarn.lock
├── package.json
├── src
│   ├── components
│   │   ├── checkbox.css
│   │   ├── input.css
│   │   ├── postcss.config.js
│   │   └── tailwind.config.js
│   └── index.js
├── visable.yaml
└── yarn.lock

在docs/index.html中引用了两个CSS文件：

<link rel="stylesheet" href="./main.css" />
<link rel="stylesheet" href="../dist/styles.css" />

其中main.css可正常加载，但../dist/styles.css加载失败。当前Vite配置如下：

import { defineConfig } from "vite";

export default defineConfig({
  server: {
    open: "index.html",
  },
  publicDir: "dist",
  root: ".",
});

解决方案 #

问题核心在于Vite的路径配置与HTML资源引用路径不匹配，提供两种可行修复方案：

方案一：修改HTML资源引用路径 #

Vite将publicDir配置的目录映射到服务根路径/下，因此直接通过根路径访问dist内的资源即可，无需相对路径：

<link rel="stylesheet" href="./main.css" />
<link rel="stylesheet" href="/styles.css" />

方案二：调整Vite配置适配项目结构 #

由于开发入口是docs/index.html，将root设为docs目录，同时把publicDir指定为相对docs的../dist，这样Vite能正确识别静态资源目录：

import { defineConfig } from "vite";

export default defineConfig({
  server: {
    open: "index.html",
  },
  publicDir: "../dist",
  root: "docs",
});

此方案下，HTML中的../dist/styles.css路径可保持不变，Vite会自动处理资源映射。

修改完成后重启Vite开发服务器，即可验证styles.css是否正常加载。

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