在Vite项目中配置@prismicio/vue插件报错，正确引入方式是什么？

核心错误原因 #

你混淆了两类完全不同的插件注册逻辑：

• vite.config.js 中注册的是Vite构建工具的原生插件，作用于构建流程，比如处理文件编译、资源打包等
• @prismicio/vue 是Vue应用层的运行时插件，作用于前端运行时逻辑，和构建工具无关，无论用Vite还是Webpack都需要在Vue应用入口文件注册，不能放到Vite配置中。

具体修复步骤 #

步骤1：清理错误的Vite配置 #

删除 vite.config.js 中所有和Prismic相关的代码，恢复正常配置：

import { defineConfig } from "vite";
import Vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [Vue()],
});

步骤2：在应用入口文件注册Prismic插件 #

根据你使用的Vue版本选择对应注册方式：

如果你用的是Vue 2

直接按照官方文档示例在 src/main.js 注册即可：

import Vue from 'vue'
import App from './App.vue'
import PrismicVue from '@prismicio/vue'
import linkResolver from './link-resolver' // 按需更新路径

const accessToken = '' // 公开仓库可留空
const endpoint = 'https://你的仓库地址.cdn.prismic.io/api/v2'

Vue.use(PrismicVue, {
  endpoint,
  apiOptions: { accessToken },
  linkResolver
})

new Vue({
  render: h => h(App)
}).$mount('#app')

如果你用的是Vue 3

调整注册写法适配Vue3的API：

import { createApp } from 'vue'
import App from './App.vue'
import PrismicVue from '@prismicio/vue'
import linkResolver from './link-resolver' // 按需更新路径

const accessToken = '' // 公开仓库可留空
const endpoint = 'https://你的仓库地址.cdn.prismic.io/api/v2'

const app = createApp(App)
app.use(PrismicVue, {
  endpoint,
  apiOptions: { accessToken },
  linkResolver
})
app.mount('#app')

步骤3：解决VS Code类型声明缺失提示 #

@prismicio/vue 没有内置TypeScript类型声明，你可以在项目src目录下新建prismic.d.ts文件，写入以下内容即可消除提示：

declare module '@prismicio/vue'

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