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
详情:
接收 Vite 的所有配置项。
参考:
vuePluginOptions
详情:
接收 @vitejs/plugin-vue 的所有配置项。
参考:
常见问题
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 文档 。