nuxt.js 相关问题

Nuxt 应用程序为每个语言环境生成重复的 hreflang

我正在构建一个具有多个语言环境的 Nuxt 应用程序。 Nuxt 似乎会自动在 head 中生成 hreflang 标签，但它会为每个语言环境生成重复的标签，例如： 我正在构建一个具有多个语言环境的 Nuxt 应用程序。 Nuxt 似乎会自动在 head 中生成 hreflang 标签，但它会为每个语言环境生成重复的标签，例如： <link data-n-head="ssr" data-hid="i18n-alt-fr" rel="alternate" href="https://example.com/fr-FR/" hreflang="fr"> <link data-n-head="ssr" data-hid="i18n-alt-fr-FR" rel="alternate" href="https://example.com/fr-FR/" hreflang="fr-FR"> 有没有办法控制它？我发布了 nuxt.config.js 文件中的 i18n 部分以供参考： i18n: { lazy: true, langDir: 'i18n/', locales: [ { code: 'en', iso: 'en', file: 'en.json', name: 'English', }, { code: 'de-DE', iso: 'de-DE', file: 'de.json', name: 'Deutsch', }, { code: 'nl-NL', iso: 'nl-NL', file: 'nl.json', name: 'Nederlands', }, { code: 'fr-FR', iso: 'fr-FR', file: 'fr.json', name: 'Français', }, ], baseUrl: 'https://example.com', defaultLocale: 'en', vueI18n: { fallbackLocale: 'en', }, seo: true, strategy: 'prefix_except_default', }, 我不知道这是否是一个好的解决方案，但您可以使用 : 在 layouts/default.vue 中删除它们 export default { head () { if (!this.$nuxtI18nHead) { return '' } // Issue : https://github.com/nuxt-modules/i18n/issues/1170 const head = this.$nuxtI18nHead({ addSeoAttributes: true }) head.link = head.link.filter(item => (item.hreflang && item.hreflang.includes('-'))) return head }, } 希望对你有帮助:)

Nuxt 3：如何将 useHead() 与在 useAsyncData() 内获取的异步数据一起使用

在我的组件中，我正在 useAsyncData 中从我的 CMS (Strapi v4) 获取数据，因为给定的路由是在服务器端预渲染的。在第二步中，我想使用获取的... </desc> <question vote="0">在我的组件的 <p><code>&lt;script setupt&gt;</code><pre> 中，我正在从 </pre><code>useAsyncData</code><pre> 内的 CMS (Strapi v4) 获取数据，因为给定的路线是在服务器端预渲染的。在第二步中，我想使用 </pre><code>useHead()</code><pre> 中获取的数据，但标题要么未定义，要么应用程序中断。</pre> </p><code>&lt;script setup&gt; const { find } = useStrapi4(); const { data } = await useAsyncData( &#34;posts&#34;, () =&gt; find(&#34;posts&#34;), ); useHead({ title: data.data[0].attributes.title, }) &lt;/script&gt; </code><pre> </pre>有没有办法在不将 <p><code>useHead()</code><pre> 集成到 </pre><code>useAsyncData()</code><pre> 中的情况下实现这一目标？我错过了什么？</pre> </p> </question> <answer tick="false" vote="0">加载变量后调用 useHead() 可组合项。<p> </p>例如。<p> </p><code>&lt;script setup&gt; const { find } = useStrapi4(); const loadData = async () =&gt; { const { data } = await await useAsyncData(&#39;posts&#39;, () =&gt; find(&#39;posts&#39;)); useHead({ title: data.data[0].attributes.title, }); }; loadData() &lt;/script&gt; </code><pre> </pre>希望有帮助！<p> </p> </answer></body>

从另一个项目访问项目页面时，Nuxt 3 层无法正常工作

如何让一个项目独立运行又可以分层访问并运行？目前，我有一个项目，如下所示： 📦根 ┣ 📂 公共资源 ┗ 📂项目1 ┗ 📂项目2 我用的是普通的...

“Fetch API 是一项实验性功能。此功能可能会在安装 Nuxt3 应用程序时随时更改”

我尝试使用以下命令创建新的 nuxt 应用程序 npx nuxi 初始化我的应用程序 成功创建了带有 Nuxt 3.0 stable 的新应用程序，但我得到了这个恼人的响应 Nuxi 3.0.0-rc.10 ...

如何在弹出窗口中使用 Twitch/Discord/Google 登录，将访问令牌传回网站并让用户登录而无需刷新？

所以我想要的是，如果用户单击“使用 Twitch 登录”（或任何其他服务），则会弹出一个新窗口并显示“授权”页面。当用户授权应用程序时...

在 nuxt.config.js 中使用 Assets 包含 js 库

我正在尝试包含一些 javascript 文件，但由于某种原因，我得到了这个 “ GET http://localhost:3000/assets/js/jquery-3.4.1.min.js 中出现错误 net::ERR_ABORTED 404（未找到） 我不知道我...

如何在nuxt vue js应用程序中从Excel文件导入数据

我在简单的 HTML 页面中有这个功能并且工作正常 头 （） { 返回 { 脚本： [ { 隐藏：'alasql'， src: 'https://cdn.jsdelivr.net/al...

如何在Nuxt中实现多语言切换？

在我当前的项目中，我正在使用 nuxt.js 开发一个多语言网站。虽然 i18n 解决方案可用，但我的方法并不专注于将英语术语翻译成西班牙语或其他语言......

$refs 未加载到 Vue.js 组件上

我在 Vue.js 中有一个组件，它有一个模态视图，里面有不同的引用。 ... 我在 Vue.js 中有一个组件，它有一个模态视图，里面有不同的引用。 <template> <div> <b-modal ref="modalDialog" > <b-row> <!-- document --> <b-col> <document-creation ref="documentCreation"/> </b-col> </b-row> <patient-creation-or-detection ref="patientCreationOrDetection" /> .... </b-model> <confirmation-dialog ref="confirmAndCreatePatient" /> ... </div> </template> 在我拥有的组件内 clearInputs () { this.$refs.patientCreationOrDetection.clearValue() }, 我在项目的不同地方使用了这个组件，它适用于除一个之外的所有情况。 在这一次事件中，我遇到了错误undefined as no function clearValue()。 如果我打印出此事件中的 $refs，则模型视图内的所有引用均未定义，但外部的其他引用（例如 confirmAndCreatePatient）不为空。 所有元素都是可见的，可以交互和工作（如果不调用 $refs） 此外：当我收到错误并且模态视图下方的页面出现此错误时，引用已定义。因此，如果我第一次单击clearInputs 按钮两次，this.$refs.patentCreationOrDetection 未定义，则错误会被指控，第二次 this.$refs.patentCreationOrDetection 是一个有效对象。 这不是时间问题，因为如果我放入 if 语句： clearInputs () { if (this.$refs.patientCreationOrDetection) { this.$refs.patientCreationOrDetection.clearValue() } }, 我可以整天点击这个并且永远不会触发。 这种行为的解释是什么？ 我使用 Nuxt 和 Vue 框架。 您是否在方法中定义了clearValue函数？ 像下面这样吗？ methods: { clearValue() { // Implement your logic to clear values here } }

nuxt-mongoose 模块：无法解析导入“#nuxt/mongoose”

我正在尝试将我的 Nuxt 项目与 nuxt-mongoose 模块集成。 （https://nuxt-mongoose.nuxt.space/getting-started/setup） 但即使我已经遵循了所有步骤，我还是遇到了问题。 ...

NUXT 3：如何在布局中使用路由中间件？ （可以吗？）

我一直在寻找在布局中使用 Nuxt 中间件。但我不确定是否可以，但是，因为我在 Nuxt 2 中使用了它，所以在 Nuxt 3 中可能是可能的。 该项目有 2 种不同的布局：公共......

带有动态文件名的 Nuxt 服务器 api 导入功能不起作用

在Nuxt服务器api中，我想从资产文件夹中导入一个静态json文件，具有动态名称 导出默认的defineEventHandler（异步（事件）=> { 常量查询 = getQuery(事件) 常量...

Nuxt js 3 页面加载完成后的滚动行为

router.options.js 文件： 导出默认值{ 滚动行为（到，从，保存位置）{ 返回 { 顶部：0， 行为：“平滑”， } }, } 我在导航页面中使用 useAsyncData...

i18n 检测浏览器语言不起作用

当我将 i18n 中的 detectorBrowserLanguage 用作 Nuxt 中的模块时，我遇到了问题。即使我的浏览器设置为英语，我仍然看到西班牙语的网站，我不知道如何让我...

为什么在 HeadlessUI Dialog/modal 中使用时 VueMultiselect 始终默认打开

我在 Nuxt 3 应用程序中使用 VueMultiselect。我在 Nuxt Headless UI Transition Dialog 模式中使用它。当我打开模式时，默认情况下会打开多选。 我有 2 个...

Nuxt3 背景图像不显示

我正在开发一个 nuxt3 项目，想要使用图像作为背景，但我遇到了它没有显示在屏幕上的问题。 我按照 Nuxt3 中的记录放置了图像。 所以我尝试： ...

在 Vue 中显示来自 sanity 的图像（nuxt 项目）

我是理智的新手，我正在努力显示理智的图像 这是我的前端代码 这是问题所在吗？ 我是理智的新手，我正在努力显示理智的图像 这是我的前端代码 这是问题吗？ <img :src="pet.image.asset" :alt="`image of ${pet.name} `" /> 这就是结果 最后这是理智后端 谢谢你！ 我期待图像被渲染！ 您可以使用Sanity Image组件。它将自动使用 img（Sanity CDN）构建 href 标签。 <li v-for="pet in data" :key="pet._id"> <sanity-image :asset-id="pet.image.asset._ref" /> </li>

如何在Nuxt 3.x中使用Pug？

如果我们通过 npx nuxi init nuxt3-app 创建 Nuxt 3 应用程序并将 app.vue 的内容从 到 <

导航涵盖主要内容

当我缩小窗口时，右侧导航菜单覆盖了主要内容 这是正常状态下的图像 窗口缩小时的图像如下 这是default.vue的代码 <

在 nuxt.js + @nuxtjs/tailwindcss 中生成 PDF 时，错误文本被截断

当使用 @nuxtjs/tailwindcss 时，在 Nuxt.js 中使用 Vue-html2pdf 从 HTML 生成 PDF 时，错误文本被截断，但在显示布局时一切正常。 生成pdf后查看 原因...