如何配置Vite使React项目npm run dev时自动打开浏览器？

你之前配置的open: '/docs/index.html'无效且页面空白，核心原因是这个路径和React项目的默认入口结构不匹配——React项目的首页默认是根目录下的index.html，Vite找不到你指定的/docs/index.html路径，自然显示空白。

下面是两种可行的解决配置：

方案1：最简配置（自动打开默认入口） #

直接设置open: true，Vite会自动打开浏览器并访问项目的默认入口页面：

export default defineConfig({
  server: {
    open: true,
  },
})

方案2：明确指定正确路径 #

如果你的项目入口是根目录的index.html，也可以直接指定根路径：

export default defineConfig({
  server: {
    open: '/',
  },
})

额外注意事项 #

• 确认项目根目录存在index.html文件，这是Vite默认的入口文件
• 保证vite.config.js（或.ts）放在项目根目录，Vite能正常读取配置
• 要是你自定义了项目入口（比如在build.rollupOptions里修改过），得同步调整server.open的路径，确保指向实际的入口页面

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