Builder.io for Vue 3 找不到模块？ 5 步轻松解决！

vue.js

2024-03-16 11:13:33

Builder.io for Vue 3：找不到模块？轻松解决！

简介

在使用 Builder.io 进行 Vue 3 开发时，你可能遇到过这个错误："找不到模块 @builder.io/sdk-vue/vue"。本文将引导你一步步解决这个问题，让你重返开发之旅。

问题根源

此错误通常是由于以下原因引起的：

Node.js 版本过低
依赖项未安装
文件路径错误
API 密钥配置不当

解决步骤

1. 检查 Node.js 版本

确保使用 Node.js 16.0 或更高版本。

2. 安装依赖项

运行 npm install @builder.io/sdk-vue 安装 @builder.io/sdk-vue 依赖项。

3. 确认文件路径

确保在以下位置导入 @builder.io/sdk-vue：

import { getContent, RenderContent, isPreviewing } from '@builder.io/sdk-vue/vue3';

4. 检查 API 密钥

在 main.ts 文件中正确配置 Builder.io API 密钥。

额外提示

检查 Builder.io SDK 是否已配置在你的项目中。
浏览控制台以查找其他错误消息。
尝试重新安装依赖项并清除缓存。
查阅 Builder.io 文档获取更详细的指南。

代码示例

以下是更新后的 Home.vue 和 main.ts 文件示例：

Home.vue：

<template>
  <RenderContent
    v-if="canShowContent"
    model="home"
    :content="content"
    :api-key="apiKey"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { getContent, RenderContent, isPreviewing } from '@builder.io/sdk-vue';

const canShowContent = ref(false);
const apiKey = 'YOUR_API_KEY';

const content = () =>
  getContent({
    model: 'page',
    apiKey: apiKey,
    userAttributes: {
      urlPath: window.location.pathname,
    },
  }).then(function (res: any) {
    this.content = res;
    this.canShowContent = content || isPreviewing();
  }.bind(this));
</script>

main.ts：

import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia';
import router from './router/route';
import BuilderVue from '@builder.io/sdk-vue';

const API_KEY = process.env.BUILDER_API_KEY;
const ENV = process.env.BUILDER_ENV || 'production';

const builder = BuilderVue({
  apiKey: API_KEY,
  env: ENV,
  data: {
    space: 'YOUR_SPACE_ID',
  },
});

createApp(App)
  .use(router)
  .use(createPinia())
  .use(builder)
  .mount('#app');