nuxt.js 相关问题

Nuxt 3 水合儿童不匹配

我使用异步等待从服务器获取一个简单的类别列表，一切正常。接下来，我需要输出一个简单的 v-for 列表，然后我收到此警告。我可以删除...的所有内容

nuxt 3 中的 nuxt/image 模块导致生产出现问题

使用 Nuxt/Image 模块并构建应用程序时，图像 URL 将更改为 https://domain.x/_ipx/_/images/foods/Appetizaer/Garlic-Bread.png。然而，图像不能被看...

我收到“此无服务器功能已崩溃”。当我将 NUXT js 应用程序部署到 Vercel 时

我在 NUXT JS 上构建了我的应用程序并将其部署在 Vercel 上，但出现如下错误。 当我打开函数日志时，它向我显示的是以下内容。 这是错误代码的完整描述我...

Vue/Nuxt：如何让组件真正动态？

为了使用动态定义的单页面组件，我们使用组件标签，因此： ... 从 '@/

嵌套 useFetch 导致 Nuxt 3 中的 Hydration 节点不匹配

在 Nuxt 3 页面内，我通过从 pinia 存储调用操作来获取帖子数据： {{ 发布数据 }} {{ 帖子内容... 在 Nuxt 3 页面内，我通过从 pinia 商店调用操作来获取帖子数据： <template> <div v-if="postData && postContent"> {{ postData }} {{ postContent }} </div> </template> <script setup> const config = useRuntimeConfig() const route = useRoute() const slug = route.params.slug const url = config.public.wpApiUrl const contentStore = useContentStore() await contentStore.fetchPostData({ url, slug }) const postData = contentStore.postData const postContent = contentStore.postContent </script> 那是我的商店： import { defineStore } from 'pinia' export const useContentStore = defineStore('content',{ state: () => ({ postData: null, postContent: null }), actions: { async fetchPostData({ url, slug }) { try { const { data: postData, error } = await useFetch(`${url}/wp/v2/posts`, { query: { slug: slug }, transform(data) { return data.map((post) => ({ id: post.id, title: post.title.rendered, content: post.content.rendered, excerpt: post.excerpt.rendered, date: post.date, slug: post.slug, })); } }) this.postData = postData.value; if (postData && postData.value && postData.value.length && postData.value[0].id) { const {data: postContent} = await useFetch(`${url}/rl/v1/get?id=${postData.value[0].id}`, { method: 'POST', }); this.postContent = postContent.value; } } catch (error) { console.error('Error fetching post data:', error) } } } }); 浏览器中的输出正常，但我在浏览器控制台中收到以下错误： entry.js:54 [Vue warn]: Hydration node mismatch: - rendered on server: <!----> - expected on client: div at <[slug] onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <Anonymous key="/news/hello-world()" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/news/hello-world', hash: '', query: {…}, name: 'news-slug', path: '/news/hello-world', …} ... > at <RouterView name=undefined route=undefined > at <NuxtPage> at <Default ref=Ref< undefined > > at <LayoutLoader key="default" layoutProps= {ref: RefImpl} name="default" > at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="default" name="default" ... > at <NuxtLayout> at <App key=3 > at <NuxtRoot> 如何解决这个问题？ 我尝试在 onMounted 中获取帖子数据，但在这种情况下 postData 和 postContent 保持为空 onMounted(async () => { await contentStore.fetchPostData({ url, slug }) }) 您可以使用 ClientOnly 组件来消除该警告。请参阅文档了解更多信息。 该组件仅在客户端渲染其插槽。

Nuxt 3，Pinia 根据布尔状态更新 bodyClass

是否可以根据 Pinia 商店的商店布尔值动态更新主体类？我能够在页面加载时获取该值，但当我切换路由时它不会更新。 店铺： 经验...

如何使用Nuxt3获取路由的参数

我使用 Nuxt3 和 Composition API。 当从 bakset 移动到 order 时，basket 正在使用 router.push，并且正在翻转参数。如何从订单中获取这些参数？在 nuxt2 版本中，哟...

Nuxt 3 项目无法找到 PWA 图标

开发工具错误 我目前正在尝试在我的 nuxt 3 项目中实现 PWA 功能，但我不断遇到这个问题：[Vue Router warn]: No match found for location with path "/icon_512x512...

错误：找不到包“surrealdb.js”

我已经用bun创建了项目，想要将超现实数据库连接到bun。但我收到此错误：找不到包“surrealdb.js” const { Surreal } = require("surrealdb.js");

如何使用 Nuxt 中间件正确检查 Firebase Auth？

我有一个与 Firebase 连接的 Nuxt 应用程序。我有一个可组合的 useAuth() ，代码如下： 从 'firebase/auth' 导入 { type User, onAuthChangedListener }; 导出默认函数 () { c...

为什么我的图片无法在网页上正常显示？

所以现在我正在尝试为我和几个朋友制作一个网站的员工页面。现在我遇到一个问题，员工页面上的图像无法正确显示。我的组件...

云函数（第二代）和“onCall”方法：为什么“request.auth”未定义？

为什么我收到 request.auth is undefined in this onCall function？ 我使用 Firebase Function 模拟器进行此测试。 我试图直接从我的应用程序调用 Firebase 函数，如下所示： /有趣...

vue-select 带有 tailwind css 类以获取较长的文本，搜索输入字段将转到下一行

我在 Nuxt 3 应用程序中使用 vue-select 和 vee-validate，但问题是，当所选选项文本太大时， 会转到下一行，因为...

在 Nuxt.js 中使用 useFetch 从 Django REST API 获取数据失败：重新加载和代码编辑时的不同行为

我正在使用 Nuxt.js 进行开发，并尝试从 Django REST API 获取数据。我在使用以下代码时遇到了几个问题： {{帖子}} &l... 我正在使用 Nuxt.js 进行开发，并尝试从 Django REST API 获取数据。我在使用以下代码时遇到了几个问题： <template> <div> {{ posts }} </div> </template> <script setup lang="ts"> const { data: posts, pending, error, refresh } = await useFetch('https://localhost:8000/api/posts/') console.log(posts, error) </script> 以下是我面临的问题： 使用 useFetch 从 Django REST API 检索数据时，会发生错误。具体输出如下日志：Proxy(Object) {mountains: Error: [GET] "https://localhost:8000/api/posts/": <no response> fetch failed at createError (…} 如果我在页面显示时编辑并保存 Vue 代码，数据会正确加载，并且我可以在服务器日志中看到请求。 但是，当我重新加载页面时，数据未加载。服务器日志中没有该请求的记录。 如果我将 URL 更改为 https://fakestoreapi.com/products，即使在页面重新加载时也会正确获取数据。 您能否建议一下为什么页面重新加载时无法加载数据以及如何解决此问题？另外，如果您对为什么使用不同的 URL 不会出现问题有任何见解，那将非常有帮助。 添加 我发现错误返回状态代码500。但是Django服务器没有任何请求日志。我怎样才能进行更多调查？ yTUHiJnnBc: FetchError: [GET] "https://localhost:8000/api/posts/": <no response> fetch failed at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async $fetchRaw2 (file:///Users/main/project/mynuxt/node_modules/ofetch/dist/shared/ofetch.00501375.mjs:228:14) at async $fetch2 (file:///Users/main/project/mynuxt/node_modules/ofetch/dist/shared/ofetch.00501375.mjs:261:15) at async setup (/Users/main/project/mynuxt/pages/blog/index.vue:14:216) { cause: [TypeError], statusCode: 500, fatal: false, unhandled: false, statusMessage: undefined, data: undefined, __nuxt_error: true } }, _key: 'yTUHiJnnBc', _defaultValue: undefined, __v_isRef: true Django 服务器日志。 [24/Dec/2023 15:03:28] "GET /api/posts/ HTTP/1.1" 200 304 它来自编辑后的代码。 2号 我使用以下代码配置后端并发出请求。结果和上面一样，重新加载时没有向服务器发送请求。前端请求的状态码是500，Nuxt和Django之间有兼容性问题吗？ def test_view(request): return JsonResponse({'message': 'Hello, World!'}) 我发现从 Nuxt 后端向自签名 https 服务器发出请求时重现了该问题。 服务器/api/posts.js export default defineEventHandler(async (event) => { const data = await $fetch('https://localhost:8000/api/posts/') return data }) 环境 节点v20.10.0 npm 10.2.3 MacOS 13.6（22G120） Python 3.11.5 Django==4.2 django-sslserver==0.22 djangorestframework==3.14.0 因此，由于您使用带有 SSL 的 localhost，我假设您也在使用 SSR，因此刷新失败的原因是因为它正在运行服务器端，而 hmr 刷新只会运行客户端，因此它可以工作。至少那是我刚刚遇到的。 尝试将其添加到您的 .env 中，这对我有用。 NODE_TLS_REJECT_UNAUTHORIZED = 0

Nuxt 3 在移动设备上更改布局

所以我刚刚启动了 Nuxt 3 应用程序（关闭了 ssr），并且尝试在移动设备上更改布局。我正在关注本教程：https://www.youtube.com/watch?v=xh_OrVwgh4M。

nuxt 3 useFetch() 返回错误 fetch failed()

我已经从 nuxt 3 官方文档中设置了 nuxt 3，并使用唯一的 useFetch() 可组合项来获取 app.vue 文件中的数据，但当我们重新加载 p.. 时，它返回错误 Error: fetch failed() .

nuxt 3中有没有办法动态设置元标签？

我正在尝试使用来自 api 的动态数据填充页面标题和元标记，以实现 seo 目的。但无法在查看页面源中获取它 我尝试过 useHead、useSeoMeta 和 useServerSeoMeta 与

vue/no-v-model-argument 'v-model' 指令不需要参数。eslint-plugin-vue

我想通过Introduction.vue显示名字和姓氏。在 InformationField.vue 中，我声明了 props。并通过 v-model:propsname ="form.introduction.

为什么我不能在我的 Vite - Nuxt - Supabase 项目上使用 useSupabaseClient() ？

我有一个使用Vite创建的项目，该项目使用Nuxt。 在脚本中，我想使用 useSupabaseClient()，但收到“未定义”错误。 依赖@nuxtjs/supabase已安装...

Nuxt vuetify 在 Nuxt.config.ts 中无法识别

我尝试安装 Nuxt vuetify 时出现新错误 安装与 npm install --save-dev @invictus.codes/nuxt-vuetify npm 安装 然后我将模块添加到 Nuxt.config.ts 导出默认定义NuxtC...