VitePress 打包报错

打包报错,提示 Error: Missing "./preload-helper" export in "vite" package

解决的方法 1

搜索 vite/preload-helper 替换为 \0vite/preload-helper

解决的方法 2

书写 vite 插件处理

// 自定义vite插件，处理vitepress打包 missing './preload-helper' 错误
{
  apply: 'build',
  enforce: 'pre',
  resolveId(id) {
    if (id.includes('vite/preload-helper')) return 'vite/preload-helper';
  },
},

原理：

因为在源码中使用了动态的import加载，所以实际被解析为存在的模块，编码为\x00vite/preload-helper，但是实际 'vite/preload-helper' 为虚拟模块，应该编码为编码为/@vite/preload-helper\x00vite/preload-helper，所以导致解码回来时解析错误，造成打包错误 Error: Missing "./preload-helper" export in "vite" package

• resolveId 钩子 用于处理模块路径, 在 vite 中, 我们可以在代码中, 引入一个不存在的模块路径, 而在 resolveId 钩子可以获得改路径, 然后对于该路径进行处理, 举个例子, 我们可以在这个钩子中自己实现 vite resolve.alias 的功能.

resolveId(id) {
  if (id.startsWith('@/')) {
    const base = path.resolve(process.cwd(), 'src')
    return id.replace(/@/,base)
  }
},

• load 钩子 常用于加载虚拟模块, 如何理解这个虚拟模块呢, 也就是, 我们在代码中引入一个不存在的模块路径, 比如 import msg from 'virtual:test-module', 按 vite 文档所说, 我们需要先在上面的 resolveId 钩子中, 在该路径加上一个\0 为前缀.

这是一个来自 Rollup 生态系统的惯例。这可以防止其他插件试图处理这个 ID（如节点解析），而像 sourcemap 这样的核心功能可以使用这些信息来区分虚拟模块和普通文件。\0 在导入的 URL 中不是一个允许的字符，所以我们必须在导入分析中替换它们。在浏览器中，一个 0{id} 的虚拟 ID 最终被编码为 /@id/x00{id}。在进入插件处理管道之前，这个 ID 会被解码回来。所以这个过程在插件钩子代码中将是不可见的.