Vite打包路径异常：无法将产物输出至指定public文件夹

问题根源 #

你遇到的打包路径错误，主要由两个配置问题导致：

• Vite配置中存在无效的entry顶层字段：Vite以HTML文件为入口，不存在entry这个顶层配置项，该配置会干扰Vite的正常解析逻辑。
• index.html中的资源路径与root配置冲突：你设置了root: 'src'，但HTML中仍使用src/main.js这类相对路径，导致入口解析异常，间接影响打包路径计算。

修复方案 #

1. 修正vite.config.js #

移除无效的entry字段，确保build.outDir路径计算正确：

import { defineConfig } from 'vite';

export default defineConfig({
  root: 'src', // 项目根目录为client/src
  build: {
    outDir: '../../public', // 从src目录向上两级到client的父目录，再进入public
    emptyOutDir: true // 自动清空输出目录，可替代命令行参数
  }
});

2. 调整index.html的资源路径 #

由于root已设为src，所有资源路径需以src为根目录，修改如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="/styles/style.css" />
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/main.js"></script>
</body>
</html>

3. 优化build脚本（可选） #

若已在配置中添加emptyOutDir: true，可以简化package.json的build命令：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

验证 #

执行npm run build后，打包产物会输出到client目录的上级目录下的public文件夹中，你可以检查该目录是否生成了预期的main.js、style.css等文件。

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