nuxt.js 相关问题

布局思维道具的内容可以更改吗？

我有这样的布局： ...所有页面的导航.. X 的内容?? ...所有页面的页脚... 对于页面/index.vue： <

Rollup 在运行“nuxt build”时无法解析导入“highcharts/modules/.js”

已安装版本： 努克斯3.10.3 nuxt-highcharts：3.1.1 问题 我已经安装了 nuxt-highcharts 并在 nuxt.config.ts 文件中添加了依赖项，如下所示： 导出默认的defineNuxtConfig({ modu...

Nuxt 3 如何将 API 设为私有

在我的 Nuxt 3 应用程序中，我所有的 API 路由似乎都是公共的。这意味着任何人都可以导航到 /api/[route] 并查看所有获取的数据，例如 /api/items 以查看有关...中所有项目的详细信息

nuxt 3 navigatorTo 目标空白不起作用

我已经安装了Nuxt 3.0.0版本并使用navigateTo方法将用户重定向到第3方网站。我想在新窗口中使用开放的第 3 方网站。 <p>我已经安装了Nuxt <pre><code>3.0.0</code></pre>版本并使用navigateTo方法将用户重定向到第3方网站。我想在新窗口中使用开放的第 3 方网站。</p> <pre><code>&lt;script setup lang=&#34;ts&#34;&gt; await navigateTo(&#39;https://nuxt.com&#39;, { open: { target: &#39;_blank&#39;, } }) &lt;/script&gt; </code></pre> <p>我已经根据Nuxt 3官方文档中提到的尝试了上述代码，但它没有重定向到新窗口。</p> </question> <answer tick="false" vote="0"> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>await navigateTo(&#39;https://nuxt.com&#39;, { open: { target: &#39;_blank&#39;, }, external: true });</code></pre> </div> </div> <p></p> <p><a href="https://nuxt.com/docs/api/utils/navigate-to#external-url" rel="nofollow noreferrer">默认情况下不允许导航到外部 URL</a></p> </answer> </body></html>

当尝试使用 v-slot:append-inner 自定义 v-combobox 的下拉图标时，会在 vuetify 中创建两个下拉图标

我想在单击 v-combobox 内的下拉图标时调用不同的函数。因此，当我尝试通过修改 v-slot:append-inner 并添加功能来实现该功能时，有两个下拉菜单

Nuxt 3 中的自定义自动导入（自动导入 Pinia 商店）

有没有办法在 Nuxt 3 中设置自定义自动导入？我使用 Pinia，我的商店位于 /stores 下的根目录中。 例如，如果我想在组合中使用 /stores/auth.store.ts 中的商店...

项目不能位于中心，对于移动模拟器，但在桌面和开发工具中，效果很好，nuxt3，tailwind

我使用nuxt3和tailwind，问题是它在我的电脑上运行良好，当我从devtools制作移动浏览器时，但当我从自己的手机打开我的网站时，我发现问题......

nuxt 2 中的元标记未显示在 Messenger 和 Instagram 聊天中

我在元数据中使用 nuxt 2 时遇到问题，我尝试共享我的网站链接，但元数据未显示。这个问题只出现在 Messenger 和 Instagram 中，在其他平台上运行良好。 Instagram 中的链接 l...

使用 SSR 放大 NUXT 的重定向和重写

我正在尝试在 Amplify 上使用 SSR Nuxt 3 应用程序。 这些是我来自 nuxt.config.ts 的路由规则 路线规则：{ '/[id]': { ssr: true, 缓存: { maxAge: 60 } }, '/': { 预渲染: true }, '/计划...

如何使用 git 将 nuxt SSR 应用程序部署到 AWS Amplify

我一直在尝试将 nuxt SSR 应用程序部署到 AWS Amplify。 我的目录结构如下 我的 nuxt 应用程序 |-.nuxt（包含视图、距离等） |-资产 |-组件 |-布局 |页 |-插件 |-st...

AWS Amplify 上的 Nuxt 应用程序在浏览器中刷新后出现路由问题

我有一个 nuxt 网站通过 Amplify 部署到 AWS。这是我的目录结构： |页数 |_时间表 |__ _id |_文章 |__ _id 例如，如果我刷新 /articles 页面，Amp 会增加反弹......

如何修复错误：spawn php-cgi ENOENT

我正在使用 Nuxt 和 php-express，我正在尝试测试我的 php 脚本，但错误持续了好几个小时，而且我找不到问题。 *服务器.cjs：* const express = require("express"...

Nuxt 3 + TypeScript：Ref 类型上不存在属性 xxx<xxx | null>

我在 Nuxt 3.9.3 中从 useFetch 获得的任何变量上都有此重复错误消息。 例如。在此页面中： 我在 Nuxt 3.9.3 中从 useFetch 获得的任何变量上都有此重复错误消息。 例如。在此页面中： <template> <div> <FilterActions :is-filtered="isFiltered" :search-result-text="data?.length" /> <LotsViews :pending-lotes="pending" :lotes="data" /> </div> </template> <script setup lang="ts"> import FilterActions from '~/components/Common/FilterActions.vue' import { LotsViews } from '~/components/Pages/Lots' const isFiltered = ref(false) const { data, pending } = await useFetch('/api/lot') </script> 在 FilterActions 中， isFiltered （看起来是 globalThis.Ref ）不会抛出错误，但是 :search-result-text="data?.length" （会抛出错误，LotsViews 组件中的“pending”和“data”也是如此。 “data”类型显示为“Ref”，“pending”为“Ref”。例如，待处理的错误消息是 “类型‘Ref’不可分配给类型‘boolean’.ts(2322)” 显然，“Ref”变量存在一些问题，而那些作为“globalThis.Ref”返回的变量则没有。 直到最近更新了一些依赖项（包括 Nuxt），我才遇到这个问题。我想知道现在如何使用“useFetch”中的数据。 实际上，该应用程序运行和构建没有问题，但我有大约 23 个带有此错误消息的文件，我想删除它。 （我无法发表评论，因为我没有足够的代表） 我有时也会遇到同样的问题 - 您的项目是否使用适用于 Linux 的 Windows 子系统？ 我正在尝试重现这个，这真的很烦人 - 请介意拉这个 https://github.com/JoniLieh/nuxt3-syntax 看看你是否有同样的错误？

设置中的await useAsyncData不会阻止Nuxt 3中的导航

我想等到导航到下一页，直到获取并设置商店数据。 我正在使用 Nuxt 3 + Supabase + Pinia 我在provider.vue中的方法（用户在签名后被重定向......

Dockerized NuxtJS 应用程序不会重新加载本地更改

我刚刚使用 Docker 和 Docker-compose 对我的第一个 NuxtJS 应用程序进行了 Docker 化。 一切都运行顺利，除了当我在本地进行更改时，正在运行的 docker 不会反映我所做的更改。 怎么...

当我们有API端点时，是否需要使用Nuxt 3中的服务器文件夹？

我们在Nuxt 3中有一个server文件夹。它有一个api文件夹。当我们有使用服务器端编程语言的 API 端点时，为什么我们应该使用它？它们是否相关？ 例如，我们...

在 Node.js 中上传大文件，会在 ERR_CONNECTION_RESET 中产生可怕的结果

我目前正在尝试在我的 Nuxt3 应用程序中实现大文件上传。对于小文件，到目前为止它工作得很好，但是当我尝试大文件（> 1GB）时，我在控制台中收到 ERR_CONNECTION_RESET...

使用 Nuxt3 安装 datagrid librairie 时出错

我有一个 Nuxt3 项目，我正在尝试添加一个名为“@revolist/vue3-datagrid”的库。我运行了命令“npm i @revolist/vue3-datagrid --save”，如库文档中所示。然而，

Nuxt3 - 如何创建一个单页作品集网站，其中帖子在 div 弹出窗口中打开（无需重新加载页面），但每个项目都有唯一的 url？

我正在使用 nuxt3、tailwindcss 和 Wordpress REST API 制作一个作品集网站。 作品集网站的总体布局如下： ... 我正在使用 nuxt3、tailwindcss 和 Wordpress REST API 制作一个作品集网站。 作品集网站总体布局如下： <body> <div id="page-wrapper"> <section id="landing-image" class="w-screen h-screen">...</section> <section id="about">...</section> <section id="projects-grid">...</section> </div> </body> 目标： 我希望网站感觉只有一页，但支持从项目网格中单击项目来阅读有关该项目的更多信息。单击项目时，内容应该加载，而无需（可见）重新加载页面。请参阅此作品集网站作为项目网格的示例，其中包含我尝试实现的项目弹出窗口：https://www.tessarosejacksoncomposer.com/ 我尝试过的： 1.）我想到的一种方法是向包含被 tailwind 隐藏的帖子内容的页面添加一个 div，并且 nuxt 跟踪状态。当帖子需要查看或不查看并且加载正确的项目内容时，Nuxt 有条件地设置“隐藏”类。 app.vue <template> <div id="page-wrapper"> <section id="landing-image" class="w-screen h-screen">...</section> <section id="about">...</section> <section id="projects-grid">...</section> </div> <div id="project-content-wrapper" class="absolute h-screen w-screen" :class="{'hidden': postHidden }"> ... (dynamically load project content and unhide by nuxt state management) ... </div> </template> 这是一个很好且简单的实现，但我的主要问题是每个项目没有唯一的 url。当我想分享一个特定的项目时，我想发送一个立即打开该项目的网址。现在该网址始终保留在主页上。第二个问题是使用该网站时没有 url 历史记录，我认为这不直观。 2.）因此，我找到了第二种方法，使用嵌套的 nuxt 页面和 <NuxtPage /> 组件（参考：https://v2.nuxt.com/examples/routing/nested-pages/ ）。我的想法是将 <NuxtPage /> 标签放在项目内容 div 中，然后有一个根据 url 进行更改的嵌套页面，但不会重新加载整个页面（明显）。在 pages/ 目录中，我创建了一个 project/ 目录、project.vue 文件，并在 project/ 目录中添加了一个 [...slug].vue 文件，其中包含项目布局并呈现内容。这样我的项目就有了 url example.com/project/project-slug。 project.vue 文件只是获得漂亮 url 的传递，并且仅包含带有 <NuxtPage /> 的模板来嵌套项目子项。 app.vue <template> <div id="page-wrapper"> <section id="landing-image" class="w-screen h-screen">...</section> <section id="about">...</section> <section id="projects-grid">...</section> </div> <div id="project-content-wrapper" class="absolute h-screen w-screen" :class="{'hidden': postHidden }"> <NuxtPage /> </div> </template> 第二种方法解决了url问题，但是页面明显重新加载并破坏了单页效果。这是因为页面可以滚动，当使用 <NuxtLink> 转到项目时，站点会滚动到顶部。当我添加一个跨 UI 元素来关闭项目弹出窗口并返回主页时，这成为一个问题。单击十字时，页面位于顶部，迫使用户再次向下滚动回到项目网格。我想要这样的错觉：弹出窗口在网站上打开，当单击十字时，用户会从上次中断的地方继续。 问题： 有谁知道一种方法来实现这个项目网格弹出效果，每个项目都有唯一的网址，同时保持留在同一个页面上的感觉？ 你可以尝试这样的事情（注意：你应该有一个根元素）： <template> <main> <div v-if="project_list"> <div id="project-wrapper" v-for="item,index in project_list" :key="'project'+index" @click="handle(item)"> <section id="landing-image" class="w-screen h-screen">...</section> <section id="about">...</section> <section id="projects-grid">...</section> </div> </div> <div id="project-content-wrapper" class="absolute h-screen w-screen" :class="{'hidden': postHidden }"> ... (dynamically load project content and unhide by nuxt state management) ... </div> </main> </template> <script setup> import {ref,onMounted} from 'vue' const route = useRoute() const postHidden = ref(true) const postContent = ref(null) const { data: project_list} = await useFetch('/path/to/myapi')//return an array of projects const handle = (item)=>{ if(!window)return window.history.pushState(null,'',`?p=${item.slug}`) postHidden.value = false postContent.value = item } onMounted(()=>{ if(route.query.p){ const post = route.query.p const {data,error} = postHidden.value = false project_list.forEach(item=>{ if (item.slug == p) postContent.value = item }) } }) </script> 这是一个粗略的实现，例如不支持错误。这个想法是使用“window.history.pushState”通过查询字符串修改 url，并在页面加载时使用此查询字符串（如果存在）

如何关闭ViteJS的模块热加载功能？

我有一个服务器端渲染生产模式Vite应用程序。我的问题是：网页通常会重新加载，控制台会显示 [vite] 连接...我将此追溯到热门...