项目场景：

VitePress做静态网站，要使用.awebp格式的图片文件。

问题描述

VitePress 执行 build 时的错误内容

build error:
[vite:build-import-analysis] [plugin vite:build-import-analysis] docs/learn/assets/24081702/66c0afb1e26bbed3d993e668.awebp: Failed to parse source for import analysis because the content contains invalid JS syntax. You may need to install appropriate plugins to handle the .awebp file format, or if it's an asset, add "**/*.awebp" to `assetsInclude` in your configuration.

原因分析：

VitePress默认不支持.awebp格式文件。

解决方案：

在配置文件.vitepress/config.mjs中添加以下配置

// .vitepress/config.ts
import {
    
     defineConfig } from 'vitepress'

export default defineConfig({
    
    
  vite: {
    
    
    assetsInclude: ['**/*.awebp']
  }
})

配合解决方案再去看看错误提示中有一句话是：

or if it’s an asset, add “**/*.awebp” to assetsInclude in your configuration.

发现已经提示了，因不知道有vite这个配置项，第一眼没看懂。

还有方案，把文件放public目录下，也可以使用（不推荐此方法）。

---

VitePress搭建的个人网站：https://blog.mosong.cc

扫描二维码关注公众号，回复： 17419446 查看本文章