Vite React项目中react-router-dom构建预览报错求助

错误原因 #

你在vite.config.js的rollupOptions.external配置项中，将react-router-dom标记为了外部依赖。这会让Vite在生产构建时跳过对该库的打包操作，直接保留原模块引用。

开发环境下Vite能通过内置的模块解析器找到node_modules中的依赖包，但生产构建后的代码在浏览器中运行时，浏览器无法识别非相对路径的模块标识符（比如直接写react-router-dom），必须使用/、./或../开头的相对/绝对路径，因此抛出了这个错误。

解决方案 #

移除vite.config.js中rollupOptions.external里的react-router-dom配置，让Vite正常将该库打包进生产产物：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      // 删除 external: ['react-router-dom'] 这一行
    },
  },
});

如果没有其他需要标记为外部的依赖，也可以直接删掉整个rollupOptions.external配置块。

补充说明 #

如果确实需要通过CDN等方式引入外部依赖，才需要使用external配置，同时要在HTML中手动引入对应的CDN脚本，并通过rollupOptions.output.globals配置模块与全局变量的映射。但你的场景显然不需要这种配置，直接移除即可解决问题。

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