Snowpack构建的React项目打包后index.html空白如何永久修复

• @snowpack/plugin-webpack 构建默认采用站点根绝对路径作为资源引用前缀，最终生成的html中所有静态资源路径均以/开头，比如/js/xxx.js
• 这类路径仅适配部署在域名根目录的线上服务场景：当你直接双击打开构建产物的index.html（走本地file协议）时，浏览器会把/js解析为磁盘当前分区的根目录路径，根本找不到实际存在的js资源，最终出现白屏。手动把路径改成./开头的相对路径就能正常加载，本质是相对路径在本地文件场景下可以正确关联同目录下的资源文件。

不需要每次构建后手动改文件，直接在现有snowpack.config.js的webpack插件配置里新增base参数，指定资源路径的相对前缀即可。
修改后的完整配置参考：

module.exports = {
    devOptions: {
        port: 3000
    },

    mount: {
        src: "/dist",
        public: {url: "/", static: true}
    },

    plugins: [
        [
            '@snowpack/plugin-webpack', {
                // 新增这一行：让构建生成的所有资源路径使用相对路径
                base: './',
                htmlMinifierOptions: false
            }
        ]
    ]
}

• 重新执行项目构建流程，生成的index.html中所有script、link标签的资源路径会自动从/js/xxx.js转换为./js/xxx.js，和你手动修改后的效果完全一致
• 开发阶段的运行不受任何影响：本地开发服务器本身基于根路径提供服务，相对路径在开发环境下可以正常解析加载资源
• 后续如果把构建产物部署到线上的子路径目录（比如https://你的域名/项目子目录/），这套相对路径配置也可以正常工作，比默认的绝对路径适配场景更广。

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