nuxt-i18n 相关问题

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

我正在使用 vue-i18n 来本地化我的表单。我有一个电子邮件字段，其中有一个占位符，其中包含一个包含 @ 符号的示例电子邮件地址。 emailPlaceholder：'例如：[email protected]'

我正在学习使用Nuxt，目前正在尝试使用nuxt-bridge，它带有大多数Nuxt3功能，同时保持我需要的nuxt-auth-next模块的兼容性。截至目前，我正在开发我的 API，你...

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

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

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

Django 中的本地化是如何工作的？

我阅读了http://docs.djangoproject.com/en/1.3/topics/i18n/localization/的一些主题但还不明白我需要做什么。首先我打算做什么... 我创建了一个新的应用程序，cal...

Nuxt 3：如何从浏览器网络 Fetch/XHR 请求列表中隐藏服务器 api 调用请求？

我有 Nuxt 3 项目，有两个页面和一个服务器 api：配置文件：nuxt.config.ts 导出默认的defineNuxtConfig({ 路线规则：{ '/api/**': { 缓存：{ maxAge：60 ...

使用自定义React）组件（在Echarts工具提示中带有钩子

我目前正在使用echarts实现散点图。我想使用一个 i18n 函数，它使用 intl lib 中的 formatNumber 。问题是我不知道是否需要写...

React 覆盖语言环境

当我更改路线或重新加载页面时，语言会重置。在控制台上我收到以下日志消息： i18next: 语言更改 zh 我认为这是由于这个电话而发生的：常量 { i18n } =

使用 Nuxt 3 和 Storyblok 使用 Netlify 生成静态站点

我正在尝试使用 Nuxt 3 构建一个静态站点，我希望该站点 100% 静态，无需任何 API 调用。为了实现这一目标，我创建了 nuxt.config.ts 文件，如下所示。 // 仅显示相关...

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

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

如何为带参数的链接设置 nuxt-link 的 active-class？

我的代码是这样的。但是，在此代码中，当domain.com/?standalone=true 时，“/”不会成为活动类。我的代码是这样的。然而，在此代码中，当 domain.com/?standalone=true 时，“/”不会成为活动类。 <nuxt-link to="/" class="navBotton" exact-active-class="active" ><span>Home</span> </nuxt-link> <nuxt-link to="/post" class="navBotton" active-class="active" ><span>Post</span> </nuxt-link> <nuxt-link to="/about" class="navBotton" active-class="active" ><span>About</span> </nuxt-link> 如何解决？当我删除exact时，它在所有页面上都变成活动类。谢谢您的一些回答。我找到了一种无论参数如何都在“/”时激活的方法。这是代码。 <nuxt-link to="/" class="navBotton home" :class="{'active': isRouteActive }" exact-active-class="active" > computed: { isRouteActive: function() { if (this.$nuxt.$route.path=="/") { return true; } else { return false; } } } 在通常称为 nuxt.config.js 的 nuxt 配置文件中，有一个名为 router 的对象的属性： router: { linkActiveClass: 'your-custom-active-link', linkExactActiveClass: 'your-custom-exact-active-link', } 然后在你的CSS中： .your-custom-active-link { /* styles here */ } .your-custom-exact-active-link { /* styles here */ } 希望有帮助！我也有同样的问题。像这样解决它： <b-link :class="{'nuxt-link-active': isRouteActive(id) }" :to="id + '?someParams=true'"> 方法： methods: { isRouteActive(id) { if (this.$route.path.includes(id)) { return true } else { return false } }, log() { console.log(this.categories) } } 但是，我想知道是否有一种本地方法可以做到这一点...... 对于 nuxtjs 3，你应该这样配置； router: { options: { linkActiveClass: "active", linkExactActiveClass: "exact-active" } } 将课程风格化.nuxt-link-active并且会自动工作。参考：https://nuxtjs.org/examples/routing/active-link-classes/ [Nuxt 3] 要自定义活动链接类，您可以使用路由器选项在 nuxt.config.ts （或 nuxt.config.js）文件中配置它们。例如： export default defineNuxtConfig({ router: { options: { linkActiveClass: "active", linkExactActiveClass: "exact-active", }, }, }) 这有什么作用：如果当前路由是确切路由或该路由的子路由，则 linkActiveClass（示例中的“活动”）适用于链接。例如，如果您有一个指向 /about 的链接，并且您当前位于 /about/team 上，则该链接仍将收到活动类。 linkExactActiveClass（示例中的“完全活动”）仅在当前路由与链接的路由完全匹配时适用。使用相同的示例，如果您的链接是 /about，则只有当您完全位于 /about 上时，它才会处于完全活动状态，而不是位于 /about/team 上。

使用“Vitest，@nuxt/test-utils”的单元测试错误（语法错误：每个文件组件至少需要一个 <template> 或 <script>。）

目标：我想通过 Vuetify 组件中的 useFetch 测试 API。错误发生：为了实现这个目标，我使用了“@nuxt/test-utils/runtime”。但是，我在日志中遇到了错误。给我...

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

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

在 Vuetify 中删除边距和填充

所以我对 Vuetify 和前端开发几乎是全新的，如果我的问题很简单或者太模糊，我很抱歉。我正在尝试使用 Nuxt 和 Vuetify 构建一个网站，但我...

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

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

Vue 3-Nuxt 3 Composables 不控制台日志

我正在尝试使用可组合项进行 console.log，它曾经工作正常，但现在它不起作用。这就是我试图做的：〜/可组合项/测试/index.ts 导出函数 useTester() { 控制台.log(...

Nuxt 3 水合儿童不匹配

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

如何在 Server Api Nuxt 3 中获取完整主机？

我需要获取完整主机，我正在 ~/server/api/test 创建一个 API 端点，但是在 DefineEventHandler 上的事件只是给我提供了例如本地主机主机但没有端口。我正在努力...

NPM 失败，尝试在arm64 机器上安装x64 依赖项

我全新安装了 Nuxt 3，它是在我的 x64 PC 上创建的。在此阶段，除了初始设置之外，没有任何更改。 Git 仓库我面临的问题是当将其克隆到我的 M1 MacBook 时，r...

嵌套 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-i18n 相关问题

最新问题