nuxt.js 相关问题

故事书中的存根 NuxtLink

我目前有一个使用 NuxtLink 的组件。当我尝试在 Storybook 中渲染它时，它指出找不到 NuxtLink 组件。我正在尝试对组件进行存根，以便故事能够呈现

CORS 问题：“对预检请求的响应未通过访问控制检查”

我正在开发一个 Vue.js/Nuxt.js 项目，我正在向“https://app.arianlist.com”发出 API 请求。但是，我遇到了 CORS 问题，并且收到了以下错误消息： “访问

<img>使用从资源动态导入作为源时不显示

这曾经与 Nuxt2 一起使用。我需要做什么才能使其与 Nuxt3 一起使用？图像没有显示，但我也没有收到错误。 这曾经与 Nuxt2 一起使用。我需要做什么才能使其与 Nuxt3 一起使用？图像没有显示，但我也没有收到错误。 <template> <button @click="doImportImage()">Import image</button> <template v-if="contactAvatarUrl"> <img :src="contactAvatarUrl" width="100px" height="100px"> </template> </template> <script setup lang="ts"> let contactAvatarUrl = ref(); const doImportImage = async () => { const contactAvatar = await import('~/assets/img/contact/1.jpg'); contactAvatarUrl.value = contactAvatar.default } </script> 图像 URL 解析为 /_nuxt/assets/img/contact/1.jpg 我仔细阅读了文档，以及他们的示例 <template> <img src="~/assets/img/nuxt.png" alt="Discover Nuxt 3" /> </template> 仅在以下情况下有效 配置了构建工具来处理此文件扩展名 这是什么意思？我如何告诉 nuxt 处理 PNG 和 JPG 文件？ 所以这篇文章回答了这个问题： https://www.lichter.io/articles/nuxt3-vue3-dynamic-images/ https://github.com/nuxt/nuxt/issues/14766/ 现在，我会将我的图像移至公共文件夹...

如何在Nuxt中使用动态图片？

我正在尝试在 Nuxt 中显示资源文件夹中的图像，但即使 HTML 中的 src 值正确，它也无法工作。 这是代码的摘录。 我正在尝试在 Nuxt 中显示资产文件夹中的图像，但即使 HTML 中的 src 值正确，它也无法工作。 这是代码摘录。 <div v-for="(item, index) in items" :key="index"> <div class="item-img"> <img :src="`../assets/imgs/${item.img}`"/> </div> </div> 上述路径是正确的，因为该组件位于与资产文件夹同一根级别的页面文件夹内。 我的数组中有图像文件名，如下所示： data() { return { images: ['image0.jpg', 'image1.jpg'], ... } 有一个异步函数正在进行 API 调用 获取一些物品。 API 完成后，随机图像将添加到每个项目中。 async getMovies() { const data = axios.get `api_call_here`) const result = await data result.data.results.forEach((item) => { let randomImg = this.images[Math.floor(Math.random() * this.images.length)] item.img = randomImg this.items.push(item) }) }, 我确信图像的路径是正确的并且它们存在于指定的文件夹中。我还知道该路径有效，因为我可以显示同一级别另一个组件内同一资产文件夹中的任何单个图像。 我想我已经尝试了 src 属性内插值的所有组合，但没有任何效果。 最后，当我在开发者控制台中检查元素时，我可以看到元素本身的正确路径。更令人困惑的是，图像似乎占据了页面上适当的空间，但它们是空的（空白）。 我已经没有主意了。如果有人能帮助我找出问题所在，我将非常感激。 在Nuxt v3中，你可以像这样使用它 <script setup> import img1 from `~/path/to/img1` </script> <template> <img :src="img1" /> </template> 这是针对 Webpack 的（因此主要是 Vue2/Nuxt2）。 尝试这样使用 <img :src="require(`../assets/imgs/${item.img}`)" /> 如Nuxt 文档中有关图像的内容所示。 使用 Nuxt 3 和 import img1 from ~/path/to/img1 工作正常，但我在使用打字稿时遇到错误。我认为在 Nuxt 2 中动态 :src 属性效果更好:)。 无论如何，如果您喜欢使用打字稿并且不想出现错误，请参阅下面的我的方法。 $slugify 只是我需要将属性转换为正确的图像名称的额外插件。 堆栈： 带有打字稿的 Nuxt 3 (docs) 顺风 插件/slugify.ts export default defineNuxtPlugin(() => { return { provide: { slugify: (text: string) => { return `${ text .toLocaleLowerCase() .trim() .replace(/[^\w\s-]/g, '') .replace(/[\s_-]+/g, '-') .replace(/^-+|-+$/g, '') }` } } } }) // "Any String" will be converted to "any-string" 组件/ImageComponent.vue <script setup lang="ts"> const props = defineProps({ imageSrc: { type: String, required: true, } }) </script> <template> <div :class="`bg-[url('${props.imageSrc)}')]`" > <div> </template> 用法 <template> <div> <h1>My awesome image.png</h1> <ImageComponent class="w-16 h-16 bg-contain" :image-src="`${$slugify('My awesome image.png')}`" /> </div> </template? my-awesome-image.png 必须放在 public 文件夹 另一种方法 - 最简单的方法！！！ 您还可以使用Nuxt Image，您可以动态地传递图像：src :) 在 Nuxt 3 Vue 组合 API 中，您可以将图像放在公共目录或资产目录中。 如果您将使用公共目录中的图像，它可以工作，但 webpack 不会优化它们，因此这不是一个专业的解决方案。 如果您想动态使用资产目录中的图像，首先您需要使用新更改的文件名获取新的“webpack”路径。您可以通过导入图像在代码中完成此操作，如下所示： import img_1 from '~/assets/fences_1.png'; import img_2 from '~/assets/fences_1.png'; 然后您可以选择拥有一个可以使用此数据进行循环的对象。 { name: "name", photo_url: img_1, link_url: "/index", }, 作为路径使用导入的img_1，它会自动改变。 现在你可以像这样在html中使用它： :style="{ 'background-image': 'url(' + item.photo_url + ')' }" 它适用于开发和生产。

如何像Axios一样使用$fetch重新发起/重新发送请求？

我有一个 onResponseError 拦截器，我想在使用新的有效令牌更新其标头后重新发送原始请求。使用 Axios 可以这样实现： 常量

Nuxt 3 中间件无限导航卫士

我创建了 auth.global.ts 从“/auth/login”转到“/34/create-issue”时，在导航防护中检测到可能存在无限重定向。中止以避免堆栈溢出...

强制 Vuetify VTextField 更新值？

我正在创建一个自定义 VTextField，它只接受数字并格式化数字。它应该将 VTextField 值更新为经过筛选和格式化的值，但它不会按预期执行。 我……

Nuxt3 加载内容数据

在 Nuxt 2 项目中，我使用 Contentful 来处理 CMS 数据，它提供了一个客户端，您可以使用方法 const api = createClient(api_token, ...) 配置，然后可以执行类似 api.getEntries(page_...

无法向mapbox Nuxt3/Vue3添加地图控件进行缩放

我创建了一个新的 Nuxt3 应用程序，并且正在使用 Mapbox。 我在创建的 Map.vue 组件中渲染了地图，但无法向其添加控件和其他选项。我就是无法理解...

当我只生成一个静态页面时，我可以在没有路由器的情况下使用nuxt3吗？

我注意到Nuxt 3中有一个app.vue文件，你可以创建一个./pages/index.vue文件，但是如果我只生成一个静态索引页面，我可以删除vue-router 和 ./pages/

根据Nuxt 3动态组件中的路由参数进行API调用

我正在尝试创建一个简单的 Nuxt 3 应用程序以用于学习目的，该应用程序在加载页面时使用动态路由从 API 加载数据。我想弄清楚的是如何使用路线 id

如何在组件之间并行抓取？

在Nuxt 3中，当使用fetch获取应该在组件中使用的页面的数据时，在组件中等待它的正确方法是什么？ 应用程序.vue 在Nuxt 3中，当使用fetch来获取应该在组件中使用的页面的数据时，在组件中等待它的正确方法是什么？ app.vue <templage> <Sidebar/> <NuxtPage> </template page.vue const paramsStore = useParamsStore(); const {category} = storeToRefs(paramsStore); const {data: product} = await useFetch('/api/product', { params: { ... } }); category.value = product.value.category; 侧边栏.vue const paramsStore = useParamsStore(); const {category} = storeToRefs(paramsStore); const {data: sidebar} = await useFetch('/api/sidebar', { params: { category: category.value // <<< need to wait for the product fetch to finish } }); 只需将待处理添加到您的代码中即可。当它从服务器获取数据时，挂起为 true，并且它显示了一个微调器。 <div v-show="pending"> /// a spiner tag comes here 在你的脚本设置中 const {pending, data: sidebar} = await useFetch('/api/sidebar', .....

nuxt3 nuxt-link动态查询参数：仅限第一次刷新页面

在 app.vue 模板标题部分： 搜索 .. ......

Nuxt 3 代理生产配置

我已经像这样配置了我的 next.config.ts ： 硝基：{ 开发代理：{ “/验证”：{ 目标：“http://example.com:8000/auth”， 更改来源：true，

Nuxt 3 动态路由和 NuxtLink 不能一起工作

我创建了一个动态路由/dashboard/[用户名].vue。当我通过输入 url 导航到此页面时，一切正常，并且 route.params.username 设置为 url 中传递的值。然而，

来自 TypeScript 类型的 Nuxt `defineProps`

我正在使用 Nuxt 3 / Vue 3 DefineProps 和 TypeScript，并希望从 TypeScript 类型推断 types prop 类型。 从 '~/types/types' 导入 { User } const props = DefineProps({ 用户：{ t...

计算元素高度的最佳方法是什么

我将 Bootstrap Vue 表格与 Vue v2 结合使用，目前使用 prop (sticky-header="600px") 来设置表格高度： 我将 Bootstrap Vue table 与 Vue v2 结合使用，目前使用 prop (sticky-header="600px") 来设置表格高度： <page-wrapper> <page-header> </page-header> <div class="content"> <b-card> <b-row> <b-col></b-col> <b-col> <b-form-group> <b-form-radio-group></b-form-radio-group> </b-form-group> </b-col> <b-col></b-col> </b-row> <div class="table-responsive"> <b-table-simple class="text-left border-left multiple-headers" small sticky-header="600px" bordered no-border-collapse> <b-thead head-variant="light"> <b-tr> <b-th></b-th> </b-tr> <b-tr> <b-th></b-th> </b-tr> </b-thead> <b-tbody> <b-tr> <b-td> </b-td> </b-tr> </b-tbody> </b-table-simple> </div> </b-overlay> </b-card> </div> </page-wrapper> 但是对于更大的屏幕来说它看起来不太好，因为底部有很多间距，这就是为什么我想将桌子高度设置为与屏幕高度相关。测量所有屏幕尺寸的表格主体外部（向上和向下）应有多少空间，然后使用 calc(100vh - XXpx) 的最佳方法是什么？ 在您的组件中，您可以使用 JS 根据屏幕高度和您想要计算的任何额外空间来计算高度，并为 .table-container 添加样式以确保它采用完整的计算高度。 .table-container { height: 100%; overflow: auto; /* Add this if you want scrolling when the content is too large */ } <template> <!-- ... your existing template ... --> <div class="table-container"> <b-table-simple class="text-left border-left multiple-headers" small :sticky-header="dynamicTableHeight" bordered no-border-collapse > <!-- ... your table content ... --> </b-table-simple> </div> </template> <script> export default { data() { return { additionalSpace: 100, // Adjust this value based on your design }; }, computed: { dynamicTableHeight() { // Calculate the dynamic height based on screen height const screenHeight = window.innerHeight || document.documentElement.clientHeight; return `calc(${screenHeight}px - ${this.additionalSpace}px)`; }, }, }; </script> 通过这样做，每当调整窗口大小时，表格都会根据屏幕高度呈现动态高度，并且 dynamicTableHeight 属性将相应更新。根据您喜欢的设计，更改 additionalSpace 值。如果表格内容超出估计高度，可以使用 overflow: auto; CSS 规则添加滚动条。这是可选的。

根据商店中的值更改布局

我正在使用 Nuxt3 和 Pinia 玩。 我想要两种布局：一种用于访客用户，另一种用于经过身份验证的用户。 应用程序.vue 我正在使用 Nuxt3 和 Pinia 玩。 我想要两种布局：一种用于访客用户，另一种用于经过身份验证的用户。 应用程序.vue <script lang="ts" setup> </script> <template> <NuxtLayout> <NuxtPage /> </NuxtLayout> </template> 布局.global.ts import {storeToRefs} from "pinia"; import {useAuthStore} from "~/store/auth"; export default defineNuxtRouteMiddleware((to) => { const authStore = useAuthStore(); const {authenticated} = storeToRefs(authStore); const layout = computed(() => { return authenticated.value ? "authenticated-layout" : "default-layout"; }); setPageLayout(layout) }) 我所做的每次测试都出现相同的错误： chunk-RAKT47ZN.js:1449 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="authenticated-layout" name="authenticated-layout" ... > at <NuxtLayout> at <App key=3 > at <NuxtRoot> warn2 @ chunk-RAKT47ZN.js:1449 logError @ chunk-RAKT47ZN.js:1623 handleError @ chunk-RAKT47ZN.js:1615 callWithErrorHandling @ chunk-RAKT47ZN.js:1567 flushJobs @ chunk-RAKT47ZN.js:1763 Promise.then (async) queueFlush @ chunk-RAKT47ZN.js:1676 queueJob @ chunk-RAKT47ZN.js:1670 (anonymous) @ chunk-RAKT47ZN.js:7208 triggerEffect @ chunk-RAKT47ZN.js:614 triggerEffects @ chunk-RAKT47ZN.js:604 triggerRefValue @ chunk-RAKT47ZN.js:1211 (anonymous) @ chunk-RAKT47ZN.js:1371 triggerEffect @ chunk-RAKT47ZN.js:614 triggerEffects @ chunk-RAKT47ZN.js:599 triggerRefValue @ chunk-RAKT47ZN.js:1211 set value @ chunk-RAKT47ZN.js:1255 finalizeNavigation @ vue-router.js:2409 (anonymous) @ vue-router.js:2319 Promise.then (async) pushWithRedirect @ vue-router.js:2287 push @ vue-router.js:2213 login @ login.vue:19 await in login (async) (anonymous) @ chunk-RAKT47ZN.js:10436 callWithErrorHandling @ chunk-RAKT47ZN.js:1565 callWithAsyncErrorHandling @ chunk-RAKT47ZN.js:1573 invoker @ chunk-RAKT47ZN.js:9397 chunk-RAKT47ZN.js:9157 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode') at parentNode (chunk-RAKT47ZN.js:9157:30) at ReactiveEffect.componentUpdateFn [as fn] (chunk-RAKT47ZN.js:7175:11) at ReactiveEffect.run (chunk-RAKT47ZN.js:423:19) at instance.update (chunk-RAKT47ZN.js:7212:52) at updateComponent (chunk-RAKT47ZN.js:7039:18) at processComponent (chunk-RAKT47ZN.js:6974:7) at patch (chunk-RAKT47ZN.js:6436:11) at patchSuspense (chunk-RAKT47ZN.js:2562:7) at Object.process (chunk-RAKT47ZN.js:2481:7) at patch (chunk-RAKT47ZN.js:6461:16) parentNode @ chunk-RAKT47ZN.js:9157 componentUpdateFn @ chunk-RAKT47ZN.js:7175 run @ chunk-RAKT47ZN.js:423 instance.update @ chunk-RAKT47ZN.js:7212 updateComponent @ chunk-RAKT47ZN.js:7039 processComponent @ chunk-RAKT47ZN.js:6974 patch @ chunk-RAKT47ZN.js:6436 patchSuspense @ chunk-RAKT47ZN.js:2562 process @ chunk-RAKT47ZN.js:2481 patch @ chunk-RAKT47ZN.js:6461 componentUpdateFn @ chunk-RAKT47ZN.js:7171 run @ chunk-RAKT47ZN.js:423 instance.update @ chunk-RAKT47ZN.js:7212 callWithErrorHandling @ chunk-RAKT47ZN.js:1565 flushJobs @ chunk-RAKT47ZN.js:1763 chunk-RAKT47ZN.js:7520 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'subTree') at move (chunk-RAKT47ZN.js:7520:28) at move (chunk-RAKT47ZN.js:7520:7) at Object.resolve (chunk-RAKT47ZN.js:2789:11) at chunk-RAKT47ZN.js:2912:20 我对 Vue 还很陌生（我主要使用 React）。 我错过了什么吗？ （SSR？）。 Vue.js 中有另一种方法可以做到这一点吗？ 我认为您不需要在您的情况下使用计算。像这样的简单验证就可以了。 这是如何使用动态布局内容的示例。 ~/middleware/layout.global.ts export default defineNuxtRouteMiddleware(() => { const authenticated = false if (authenticated) { return setPageLayout('authenticated') } else { return setPageLayout('default') } }) 如果您将 authenticated 设置为 true，它会将布局更改为 authenticated。 创建布局 ~/layouts/authenticated.vue <template> <div> <h1>Authenticated</h1> <div> <slot /> </div> </div> </template> ~/middleware/default.vue <template> <div> <h1>Default Layout</h1> <div> <slot /> </div> </div> </template> 设置页面布局 app.vue <template> <div> <NuxtLayout> <NuxtPage /> </NuxtLayout> </div> </template> ~/pages/index.vue <script lang="ts" setup> definePageMeta({ layout: 'authenticated' }) </script> <template> <div> <h1>Home page</h1> </div> </template> 已测试，有效。

Nuxt v2.4 的全局混入：未定义

将我的 Nuxt 项目从 1.4 升级到 2.4.0 后，我的全局 mixins 不再起作用。 我尝试仅在 SSR 模式下设置它，仅适用于客户端或仅适用于服务器，但没有任何效果。 在我的插件/混合中...

Stylelint 在 Nuxt 2 上给出多个符号错误

当我在 VSCode 中打开 Nuxt 项目时，将鼠标悬停在样式元素上时会看到许多错误消息。但是，我在控制台中没有看到任何错误。尽管 VSCode 显示许多相关警告...