Vite构建后子目录HTML无法加载CSS/JS的内置方案咨询

API 探路者

2026-7-4

解决Vite构建子目录页面资源路径异常问题

核心原因

Vite仅会处理作为项目入口的HTML文件（如根目录的index.html）的资源引用，自动替换为带哈希的绝对路径；而public/blog下的HTML文件属于静态资源，会被直接复制到构建产物目录，不会经过Vite的资源路径转换，导致相对路径引用无法正确指向assets目录下的哈希资源。

内置解决方案

1. 统一资源引用为绝对路径

修改public/blog下所有博客页面的资源引用，将相对路径改为根绝对路径：

原代码：

<link rel="stylesheet" href="style.css">
<script src="main.js"></script>

修改后：

<link rel="stylesheet" href="/style.css">
<script src="/main.js"></script>

2. 配置Vite的`base`选项（关键）

在vite.config.js中明确设置base，确保资源路径的根目录正确：

// vite.config.js
export default {
  base: '/' // 若部署在Netlify根域名，直接设为 '/'；若部署在子路径，需改为对应路径，如 '/my-blog/'
}

Vite构建时会自动将所有绝对路径引用的资源，替换为带哈希值的/assets/xxx路径，无论HTML文件在哪个子目录下。

3. （可选）将博客页面设为Vite入口

如果需要Vite对博客页面做更多编译处理（如注入环境变量、使用模板语法），可在vite.config.js中配置多入口：

// vite.config.js
import { resolve } from 'path'

export default {
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'public/index.html'),
        blogPost1: resolve(__dirname, 'public/blog/individual-blog-post.html')
        // 其他博客页面依次添加
      }
    }
  }
}

这样Vite会将每个博客页面都作为入口处理，自动转换资源引用路径。