Vite

@vuepress/bundler-vite

Vite 打包工具是由 @vuepress/bundler-vite在新窗口打开 包提供的。它是 vuepress在新窗口打开 包的依赖之一,当然你也可以单独安装它:

npm i -D @vuepress/bundler-vite@next

配置项

Vite 打包工具的配置项:

const { viteBundler } = require('@vuepress/bundler-vite')

module.exports = {
  bundler: viteBundler({
    viteOptions: {},
    vuePluginOptions: {},
  }),
}
import { viteBundler } from '@vuepress/bundler-vite'
import { defineUserConfig } from '@vuepress/cli'

export default defineUserConfig({
  bundler: viteBundler({
    viteOptions: {},
    vuePluginOptions: {},
  }),
})

viteOptions

vuePluginOptions

常见问题

SSR Externals 问题

当你引入一个第三方库(如 foo-lib)时,你可能会在构建时遇到一个常见的错误:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /path/to/foo-lib

此时,你需要设置 ssr.noExternal 配置项来解决它:

export default defineUserConfig({
  bundler: viteBundler({
    viteOptions: {
      // @ts-expect-error: vite 还没有给 ssr 配置项提供类型
      ssr: {
        noExternal: ['foo-lib'],
      },
    },
  }),
})

VuePress 使用 Vite 服务端渲染 (SSR) 来将 Markdown 预渲染成 HTML 文件。尽管它可以在 VuePress 中正常使用,但该功能仍然被标记为实验性能力,因此可能会有一些小问题。想要完全理解上面的报错原因,你可以去了解一下 Vite SSR Externals 文档在新窗口打开