Vue Vite + CosmicJS

Question

我正在建立一個博客SPA網站作為一種愛好，並試圖弄清楚什么是獲得最小延遲從數據庫獲取帖子的最佳方式。

到目前為止，我已經嘗試了 Wordpress ，但它的 API 至少在每次第一次初始請求時，啟用了 API 緩存，大約需要一秒鍾（800-1100ms）來加載少數帖子 - 准確地說每個帖子有 6 個圖片和2-300字左右，僅供測試。

因此，我正在尋找其他可能的解決方案以加快請求速度但保持免費並遇到 Cosmic JS。

我安裝了cosmicjs module ，但在我嘗試啟動請求時遇到了各種錯誤，根據它們的文檔，如下所示：

<script>
const Cosmic = require('cosmicjs')
const api = Cosmic()
// Set these values, found in Bucket > Settings after logging in at https://app.cosmicjs.com/login
const bucket = api.bucket({
  slug: "YOUR_BUCKET_SLUG",
  read_key: "YOUR_BUCKET_READ_KEY"
})
</script>

首先，你不能在 Vite 中使用require ，所以我改變了這個

const Cosmic = require('cosmicjs')

對此

import Cosmic from "cosmicjs"

但我仍然收到錯誤：

ReferenceError: process is not defined
    at node_modules/cosmicjs/dist/helpers/constants.js (cosmicjs.js?v=2a84de6d:1367:19)
    at __require2 (chunk-NKHIPFFU.js?v=2a84de6d:15:50)
    at node_modules/cosmicjs/dist/main.js (cosmicjs.js?v=2a84de6d:1387:21)
    at __require2 (chunk-NKHIPFFU.js?v=2a84de6d:15:50)
    at node_modules/cosmicjs/dist/index.js (cosmicjs.js?v=2a84de6d:3359:23)
    at __require2 (chunk-NKHIPFFU.js?v=2a84de6d:15:50)
    at cosmicjs.js?v=2a84de6d:3371:16ű

無法弄清楚下一步該怎么做才能使這項工作，目前我的代碼對於 cosmic 請求部分看起來像這樣：

import Cosmic from "cosmicjs"

const api = Cosmic();


const bucket = api.bucket({
  slug: "NOT-GOING-TO-SHOW-SORRY-AND-THX",
  read_key: "NOT-GOING-TO-SHOW-SORRY-AND-THX",
});

const data = await bucket.objects
  .find({
    type: "posts", // Object Type slug
  })
  .props("title,slug,metadata") // response properties
  .limit(10); // number of Objects to be returned 

  console.log(data)

任何想法都可能是一個很好的幫助，在此先感謝

Answer 1

弄清楚了：

因此，任何試圖在Vite中使用在該模塊的任何部分中具有 function process的任何節點模塊的人，都應該執行以下操作

在你的vite.config.ts或vite.config.js添加以下內容

export default defineConfig({
  // ...
  define: {
    'process.env': process.env
  }
})

而不是要求

const Cosmic = require('cosmicjs')

總是使用導入

import Cosmic from "cosmicjs"

除此之外，一切都與其他 API 請求相同，例如。 就我而言，我是 API 從我的cosmic js Bucket請求帖子

<script setup lang="ts">

import { ref } from "vue";
import { onMounted } from "vue";
import moment from "moment";
import Cosmic from "cosmicjs"

const api = Cosmic();
const posts = ref([] as any);

const isLoading = ref(false);


const bucket = api.bucket({
  slug: "c27229f0-9018-11ed-b853-65fa50acc7e7",
  read_key: "G71yMNlvizQCtrvVyp9Z1AecQp8a4RTr5dl9uEGi6nst9FNQIW",
});
async function fetchData() {
      isLoading.value = true
      const data = await bucket.objects.find({
        type: 'posts'
      }).props('slug,title,content,metadata') // Limit the API response data by props
      posts.value = data.objects
      isLoading.value = false

      console.log(posts)
    }


onMounted(async () => {
fetchData();    
});

</script>

並在我的模板中遍歷它們

<template>

    <ul v-if="!isLoading" class="blog-posts-ul" v-for="post in posts" :key="post.slug">
      <div class="posts-card">
        <a
          ><router-link
            :to="/blog/ + post.slug"
            key="post.id"
            class="posts-permalink"
          >
          </router-link
        ></a>
        <img
          v-if="post.metadata.image != null"
          class="post.metadata.hero"
          :src="post.metadata.image.imgix_url"
          :alt="post.title"
        />
        <img v-else src="@/assets/logos/favicon-big.png" />
        <div class="posts-date">
          <p>
            {{ moment(post.date).fromNow() + " " + "ago" }}
          </p>
        </div>

        <div class="posts-text">
          <h1 class="posts-title">{{ post.title }}</h1>

          <p v-html="post.excerpt" class="posts-excerpt"></p>
        </div>
      </div>
    </ul>
</template>

作為最后的旁注，與Wordpress API 請求相比，這工作完美，我在后端 CMS 使用Wordpress ，即使啟用了 API 緩存插件，加載帖子大約需要 800-1100 毫秒，現在時間縮短到大約 30 毫秒API 基於文本的數據請求，每張圖片（帖子的縮略圖）額外 30-40 毫秒。