在常规Vue.js应用中使用Vitepress组件遇重复声明错误求解决方案

问题原因 #

直接导入vitepress/dist下的打包组件会导致Vite内部工具函数（如__vite__injectQuery）重复声明——VitePress的dist包已经包含了一套Vite相关工具，和你项目本身的Vite环境冲突，因此抛出语法错误。

可行方案：导入VitePress源码组件 #

1. 调整Vite配置 #

在项目的vite.config.js中添加别名和依赖优化配置，让Vite能正确处理VitePress的源码：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      'vitepress/client': 'vitepress/src/client',
      'vitepress/theme-default': 'vitepress/src/client/theme-default'
    }
  },
  optimizeDeps: {
    include: [
      'vitepress/src/client/theme-default/Layout.vue',
      'vitepress/src/client/theme-default/components/VPButton.vue'
      // 按需添加你需要的其他组件
    ]
  }
})

2. 导入源码组件和样式 #

替换之前的dist路径，直接从源码目录导入组件和样式：

<script setup>
// 导入需要的组件
import Layout from 'vitepress/theme-default/Layout.vue'
import VPButton from 'vitepress/theme-default/components/VPButton.vue'

// 导入基础样式
import 'vitepress/src/client/theme-default/styles/vars.css'
import 'vitepress/src/client/theme-default/styles/base.css'
import 'vitepress/src/client/theme-default/styles/fonts.css'
</script>

<template>
  <Layout>
    <VPButton type="primary">测试按钮</VPButton>
    <div>Hello world</div>
  </Layout>
</template>

3. 补充VitePress上下文依赖 #

VitePress的组件依赖内部全局状态，需要在App根组件中提供必要的上下文数据：

<!-- App.vue -->
<script setup>
import { createData } from 'vitepress/client/app'
import { provide } from 'vue'

// 模拟VitePress核心数据，可根据需求扩展字段
const data = createData({
  site: { title: '我的Vue应用' },
  page: { frontmatter: {} }
})

// 注入全局上下文
provide('$site', data.site)
provide('$page', data.page)
</script>

4. 安装缺失依赖 #

运行项目时如果遇到依赖缺失的报错（如@vueuse/core、shiki等），直接安装对应包即可：

npm install @vueuse/core shiki markdown-it -D

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