Docusaurus执行build后本地打开index.html站点无法正常加载

两个配置和使用方式的错误共同导致了报错：

• baseUrl配置不符合规范：该字段是站点部署后的URL根路径，不是本地构建产物的文件系统路径，你当前填写的本地绝对路径会导致所有静态资源、页面路由的拼接地址完全错误，触发资源加载404、路由匹配失败。
• 使用方式错误：Docusaurus构建输出的是基于History路由的单页应用，受浏览器安全策略限制，不支持直接通过file://协议双击打开build/index.html访问，哪怕配置完全正确，直接打开本地文件也会出现跨域、资源加载失败的问题。

• 修正配置文件
  打开docusaurus.config.js，找到baseUrl字段，根据你的部署场景修改：
  • 如果本地预览、或者站点部署在域名根路径（例如直接绑定到example.com），将值改为/
  • 如果站点部署在域名的子目录下（例如example.com/docs/），将值改为对应子目录路径/docs/
    修正后的对应配置段如下：

  const config = {
     title: "qwerty",
     tagline: "Dinosaurs are cool",
     url: "https://your-docusaurus-test-site.com",
     baseUrl: "/", // 替换掉原来的本地文件路径
     onBrokenLinks: "throw",
     onBrokenMarkdownLinks: "warn",
     favicon: "img/favicon.ico",
     // 其余配置保持原有内容无需修改
     organizationName: "facebook",
     projectName: "docusaurus",
     i18n: {
        defaultLocale: "en",
        locales: ["en"],
     },
     presets: [
      // 原有presets配置保持不变
     ]
  }
  

• 用正确方式预览构建产物
  不要直接双击打开本地HTML文件，在项目根目录执行Docusaurus内置的预览命令：

  # npm用户执行
  npm run serve
  
  # yarn用户执行
  yarn serve
  
  # pnpm用户执行
  pnpm serve
  

  命令执行完成后，终端会输出本地预览地址（默认为http://localhost:3000），在浏览器访问该地址即可正常打开构建后的站点。

补充说明：如果需要用其他静态服务（如Nginx、http-server）托管build目录的文件，只要服务将build目录作为站点根目录，配置正确的baseUrl后即可正常访问，依然不支持直接用file协议打开本地HTML文件。

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