如何通过Vite Dev Server额外提供静态资源目录的服务？

Vite没有直接对应Webpack contentBase多目录的配置项，但通过扩展Dev Server中间件就能实现需求，且完全不会影响生产构建（无需复制目录），步骤如下：

1. 在项目根目录的vite.config.js中，导入Vite内置的express静态中间件（无需额外安装依赖）
2. 利用server.configureServer钩子，向Dev Server添加自定义静态目录的中间件

代码示例 #

import { defineConfig } from 'vite'
import expressStatic from 'express/lib/static'

export default defineConfig({
  server: {
    configureServer(server) {
      // 添加额外静态目录（示例为项目根下的dev-static文件夹）
      server.middlewares.use('/dev-static', expressStatic('./dev-static'))
    }
  }
})

关键说明 #

• ./dev-static是你要添加的额外静态目录路径，可根据实际需求修改
• /dev-static是访问该目录资源的URL前缀，比如目录内的test.png，可通过http://localhost:5173/dev-static/test.png直接访问
• 该配置仅对开发服务器生效，生产构建时不会处理此目录，完全符合"仅开发阶段可用"的要求

如果不需要URL前缀，希望目录内资源通过根路径直接访问，可修改代码为：

server.middlewares.use(expressStatic('./dev-static'))

此时dev-static里的test.png可通过http://localhost:5173/test.png访问。

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