小编som*_*ser的帖子

我正在尝试使用组合 API 获取 useMeta 的动态标题，但它不起作用。

<script setup>
import { computed } from 'vue'
import { POST } from '@/constants/blog'
import { useQuery, useResult } from "@vue/apollo-composable";
import { useRoute } from 'vue-router'
import { useMeta } from "vue-meta";

  const route = useRoute();
  const variables = computed(() => ({
    slug: route.params.slug,
  }));
  const { result, loading, error } = useQuery(
    POST, variables
  );
  const post = useResult(result, null, data => data.post.data );
  const metaTitle = computed(() => ({
    title: post.attributes.title,
  })); …

我有一个包含两个项目的 monorepo -web和docs. 其中每个都是自己的 Vercel 项目，该web项目安装在https://example.com并docs安装在https://docs.example.com。所有这一切都按预期进行。

我现在希望该项目可以在https://example.com/docsdocs上使用。在项目中，我在文件中设置了以下重写。webvercel.json

{
  "rewrites": [
    {
      "source": "/docs/:match*",
      "destination": "https://docs.example.com/:match*"
    },
    { "source": "/(.*)", "destination": "/" }
  ]
}

这适用于主索引文件，但所有相应的 css 和 js 文件都会导致 404。浏览器正在https://example.com/_next查找这些文件，这是不正确的，它应该查看https://docs.example.com/_next。

我该如何进行这项工作？

我想将规范 URL 添加到 Nuxt3 应用程序中的每个页面。

在 Nuxt2 中可以这样做：

// ~/layouts/default.vue 

export default {
  head() {
    return {
      link: [
        {
          rel: 'canonical',
          href: 'https://example.com' + this.$route.path
        }
      ]
    }
  }
}

在 Nuxt3 中我尝试使用：

// ~/layouts/default.vue 

<script setup>
const route = useRoute()
useHead({
  link: [
    {
      rel: 'canonical',
      href: 'https://example.com' + route.path,
    },
  ],
})
</script>

但是，导航时不会更新。如何使其具有反应性？

如何在 nuxt 3 中添加全局CSS？

是否有像 nuxt 2 中那样的 CSS属性？

nuxt2.config

export default {
  css: [
    '@/assets/css/main.scss'
  ]
}

我在使用 prisma 编写查询时遇到问题，该查询包含模型关系键上的过滤器。

model Car {
  id        Int      @id @default(autoincrement())
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  plate     String  @unique
  place     String

  bookings  Booking[]

  @@map("cars")
}

我的预订模型如下：

model Booking{
  id        Int      @id @default(autoincrement())
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  place String

  startDate DateTime
  endDate   DateTime

  carId Int
  car   Car @relation(fields: [carId], references: [id])

  @@map("bookings")
}

我无法表达返回每辆车的查询，这些车辆在其预订关系/密钥中遵守 startDate 和 endDate 的给定标准。我将不胜感激任何想法或线索，提前谢谢你。

有人已经在 Vue3 中使用过 AOS 或 vue-aos 包吗？

尽管禁用了配置，但我还是收到了一堆错误，可能是由于 ssr （Vue 未定义，文档未定义）所致。

nuxt.config.ts

export default defineNuxtConfig({
  plugins: [
    { src: '~/plugins/aos', mode: 'client', ssr: false }
  ],
}}

插件/aos.ts

import VueAOS from "vue-aos"

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(VueAOS)
})

我尝试了这种方式，我尝试了使用cdn文件的方式（但它导致使用.init（）时未定义AOS并且两者都不起作用。每个关于AOS的教程都与Nuxt2相关。

我还尝试将vue-aos包放在 nuxt 配置上的 build.transpile 上，但没有成功。

多谢

语境

我正在使用无服务器框架aws-node-typescript的示例。我的目标是将Prisma集成到其中。

到目前为止，我有：

\n
1. 使用本地创建项目serverless create
\n
2. 在 Railway 上设置 PostgreSQL 数据库
\n
3. 安装prisma、运行prisma init、创建基本模型并成功User运行prisma migrate dev
\n
4. users通过复制现有hello函数创建第二个函数
\n
5. 使用部署该功能serverless deploy
\n
6. 现在在我的函数中，当我实例化 时PrismaClient，我收到内部服务器错误，并且该函数记录此错误："ENOENT: no such file or directory, open \'/var/task/src/functions/users/schema.prisma\'"
\n

我的项目结构如下：

.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 README.md\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package-lock.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 prisma\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 migrations\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 20221006113352_init\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 migration.sql\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 migration_lock.toml\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 schema.prisma\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 serverless.ts\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82 …

请任何人帮忙指导如何使用 webpack5 模块捆绑器创建 nuxt3 项目。在 nuxt3 官方文档中，他们提到他们支持 webpack5，但没有提及如何使用它。默认的 nuxt3 模块捆绑器是 Vite。

我尝试做一件简单的事情：在路线更改时，重新获取数据。

这是我的链接：

<li v-for="category in categories" :key="category.id" class="mb-1">
  <NuxtLink :to="{ query: { cat: category.slug } }">
    {{category.title}}
  </NuxtLink>
</li>

还有我的要求：

<script setup>
const route = useRoute()

const { data:categories } = await useFetch('http://127.0.0.1:8000/api/tasks/category/', {
  key: route.fullPath, 
  initialCache: false
})
const { data:tasks, refresh } = await useFetch(`http://127.0.0.1:8000/api/tasks/?cat=${route.query.cat}`, {
  key: `tasks:${route.query.cat}`, 
  initialCache: false
})

watch(() => route.query.cat, () => refresh())

</script>

因此，点击时，url 会发生很大的变化：

http://localhost:3000/tasks?cat=category1
http://localhost:3000/tasks?cat=category3
http://localhost:3000/tasks?cat=category2

但请求是相同的（来自 Django DRF 后端）：

GET http://127.0.0.1:8000/api/tasks/?cat=category1
GET http://127.0.0.1:8000/api/tasks/?cat=category1
GET http://127.0.0.1:8000/api/tasks/?cat=category1

看起来它保留了第一类，即使initialCache: false