nuxt.js 相关问题

Nuxt.js是一个用于创建Vue.js应用程序的框架，您可以选择Universal，Static Generated或Single Page应用程序（受Next.js启发）

我使用 useHead 来更新页面中的标题，标题在安装页面时更新，但是当我重新访问页面时，页面标题不会更新。当我重新访问页面标题时应该是

vue.js nuxt.js vuejs3 vue-router nuxtjs3

回答 0 投票 0

nuxt（2）找不到JS导入依赖项（@aws-sdk/client-dynamodb）

出现错误：未找到这些依赖项：努克斯02 | 努克斯02 | * ./middleware/checkForRedirect.js 中的 @aws-sdk/lib-dynamodb 努克斯02 | * @aws-sdk/client-dynamodb 在 ./middleware/checkForRedire...

amazon-dynamodb nuxt.js

回答 1 投票 0

使用 useNuxtApp 和 Nuxt 3 使用 Vitest 测试组件

我想使用 useNuxtApp 可组合项测试组件。这是组件（MyComponent.vue）： {{ $fmt(12)... 我想使用 useNuxtApp 可组合项测试组件。这是组件(MyComponent.vue): <template> <div class="flex justify-between"> <span>{{ $fmt(12) }}</span> </div> </template> <script lang="ts" setup> const { $fmt } = useNuxtApp() </script> $fmt是plugins文件夹中的插件。问题是当我尝试使用 MyComponent.vue 测试 vitest 时，测试未开始并出现此错误： ReferenceError: useNuxtApp is not defined 我不知道如何模拟 useNuxtApp 可组合项解决方案是在组件中导入 useNuxtApp： <template> <div class="flex justify-between"> <span>{{ $fmt(12) }}</span> </div> </template> <script lang="ts" setup> import { useNuxtApp } from '#app' const { $fmt } = useNuxtApp() </script> 在 #app 中添加 #head 和 vitest.config.js 别名，以将 useNuxtApp 导入到您的测试文件中： import path from 'path' import vue from '@vitejs/plugin-vue' export default { plugins: [vue()], test: { globals: true, environment: 'jsdom', setupFiles: './tests/unit/setup/index.ts', }, resolve: { alias: { '@': path.resolve(__dirname, '.'), '#app': path.resolve( __dirname, './node_modules/nuxt/dist/app/index.d.ts' ), '#head': path.resolve( __dirname, './node_modules/nuxt/dist/app/index.d.ts' ), }, }, } 最后你可以在测试文件中模拟 useNuxtApp： import { vi } from 'vitest' import * as nuxt from '#app' import { currency } from '@/plugins/utils/fmt-util' // @ts-ignore vi.spyOn(nuxt, 'useNuxtApp').mockImplementation(() => ({ $fmt: { currency }, })) 您可以使用存根来代替嘲笑： vi.stubGlobal("useNuxtApp", () => vi.fn(() => ({ $fmt: vi.fn() })));

nuxt.js nuxtjs3 vitest

回答 2 投票 0

我想在 NUXT 应用程序中使用库，但它给我错误，顶级等待在配置的目标环境中不可用

我正在我的组件和内部导入一个 npm 库该 npm 库中的错误：顶级等待在配置的目标环境中不可用（“chrome87”，“edge88”...

nuxt.js vue-composition-api nuxtjs3

回答 0 投票 0

获取/挂载获取的数据时Vue3内部错误

使用： - [email protected] [email protected] [email protected] 文件夹结构：页面 |_index.vue |_ 项目 |_ [id].vue 索引.vue：使用： - [email protected] - [email protected] - [email protected] 文件夹结构： pages |_ index.vue |_ items |_ [id].vue index.vue： <template> <div> <ul> <li v-for="item in items" :key="item"> <NuxtLink :to="`${item}`"> {{ item }} </NuxtLink> </li> </ul> </div> </template> <script setup lang="ts"> const items = [ 'items/1', 'items/2', 'items/3', ]; </script> [id].vue： <template> <div> <ItemDetails v-bind="data.details" /> <ItemDetailsTabs v-bind="data" /> </div> </template> <script setup lang="ts"> import { useFetch } from '#app'; import { useRoute } from 'vue-router'; import ItemDetails from '...'; import ItemDetailsTabs from '...'; import { ItemDetailsProps } from '...'; import { ItemDetailsTabsProps } from '...'; const { id } = useRoute().params; const endpoint = `/api/items?id=${id}`; interface ItemData extends ItemDetailsTabsProps { details: ItemDetailsProps; } const { data } = await useFetch(endpoint) as unknown as { data: ItemData; }; </script> 如果在 index.vue 中我通过 v-for 列出了所有项目， NuxtLink 有 target="_blank - 打开项目页面成功（这里没有问题）。不幸的是，我不允许使用 target=_blank （应该在同一选项卡中打开页面），但这会导致以下错误： runtime-core.esm-bundler.js:40 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. [Vue Router warn]: uncaught error during route navigation: warn @ vue-router.mjs:35 triggerError @ vue-router.mjs:3449 (anonymous) @ vue-router.mjs:3487 Promise.catch (async) handleScroll @ vue-router.mjs:3487 finalizeNavigation @ vue-router.mjs:3335 (anonymous) @ vue-router.mjs:3207 Promise.then (async) pushWithRedirect @ vue-router.mjs:3174 push @ vue-router.mjs:3099 replace @ vue-router.mjs:3102 updateCountry @ useCountrySelector.ts:38 callWithErrorHandling @ runtime-core.esm-bundler.js:173 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:182 job @ runtime-core.esm-bundler.js:1812 callWithErrorHandling @ runtime-core.esm-bundler.js:173 flushJobs @ runtime-core.esm-bundler.js:406 Promise.then (async) queueFlush @ runtime-core.esm-bundler.js:298 queueJob @ runtime-core.esm-bundler.js:292 (anonymous) @ runtime-core.esm-bundler.js:5761 triggerEffect @ reactivity.esm-bundler.js:400 triggerEffects @ reactivity.esm-bundler.js:390 triggerRefValue @ reactivity.esm-bundler.js:1021 (anonymous) @ reactivity.esm-bundler.js:1158 triggerEffect @ reactivity.esm-bundler.js:400 triggerEffects @ reactivity.esm-bundler.js:385 triggerRefValue @ reactivity.esm-bundler.js:1021 (anonymous) @ reactivity.esm-bundler.js:1158 triggerEffect @ reactivity.esm-bundler.js:400 triggerEffects @ reactivity.esm-bundler.js:385 triggerRefValue @ reactivity.esm-bundler.js:1021 set value @ reactivity.esm-bundler.js:1066 finalizeNavigation @ vue-router.mjs:3334 (anonymous) @ vue-router.mjs:3207 Promise.then (async) pushWithRedirect @ vue-router.mjs:3174 push @ vue-router.mjs:3099 navigate @ vue-router.mjs:2189 callWithErrorHandling @ runtime-core.esm-bundler.js:173 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:182 invoker @ runtime-dom.esm-bundler.js:345 TypeError: Cannot read properties of null (reading 'parentNode') at parentNode (runtime-dom.esm-bundler.js:35:30) at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5731:17) at ReactiveEffect.run (reactivity.esm-bundler.js:190:25) at instance.update (runtime-core.esm-bundler.js:5763:56) at updateComponent (runtime-core.esm-bundler.js:5588:26) at processComponent (runtime-core.esm-bundler.js:5521:13) at patch (runtime-core.esm-bundler.js:5119:21) at patchSuspense (runtime-core.esm-bundler.js:1253:13) at Object.process (runtime-core.esm-bundler.js:1204:13) at patch (runtime-core.esm-bundler.js:5125:26) Uncaught (in promise) TypeError: Cannot read properties of null (reading 'subTree') at move (runtime-core.esm-bundler.js:6043:34) at move (runtime-core.esm-bundler.js:6043:13) at Object.resolve (runtime-core.esm-bundler.js:1409:21) at runtime-core.esm-bundler.js:1523:30 如果控制台记录，数据似乎已成功获取。打开页面并收到此错误后，在页面刷新时，将显示 ItemDetails 页面，并按预期显示获取的数据。我缺少什么？任何帮助将不胜感激！

vue.js nuxt.js vue-router vue-router4

回答 0 投票 0

更新已安装的vue 3（nuxtjs）中的tinymce html内容

我在 nuxt.js 中有以下 vue3 页面。我已全局禁用 SSR。函数 setHtml() { tinymce.activeEditor.setContent('<p>test</p>'); } </</desc> <question vote="0"> <p>我在 nuxt.js 中有以下 vue3 页面。我已全局禁用 SSR。</p> <pre><code><script setup> function setHtml() { tinymce.activeEditor.setContent('<p>test</p>'); } </script> <template> <Navbar/> <editor api-key="no-api-key" :init="{ menubar: false, plugins: 'lists advlist link image emoticons', toolbar: 'styleselect | forecolor backcolor | font-size bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | link image emoticons' }" /> <button @click="setHtml()"> Update html </button> <br> <textarea id="htmlOutput" style="width: 100%; height: 50px;"></textarea> </template> <script> import Editor from '@tinymce/tinymce-vue' export default { mounted() { tinymce.activeEditor.setContent('<p>test</p>'); } } </script> </code></pre> <p>现在，我想在组件加载后直接将编辑器的 html 更新为 <pre><code><p>test</p></code></pre> 。为此我应该使用<pre><code>mounted()</code></pre>。这会导致以下错误：</p> <pre><code>[nuxt] error caught during app initialization ReferenceError: tinymce is not defined </code></pre> <p>我尝试创建一个名为 <pre><code>setHtml()</code></pre> 的函数，该函数通过按钮调用。这确实有效。所以，我认为会发生以下两种情况之一：</p> <ol> <li><pre><code>mounted()</code></pre>的范围无法访问<pre><code>tinymce</code></pre></li> <li>每当执行<pre><code>mounted()</code></pre>时，编辑器尚未成功加载</li> </ol> <p>如何在安装页面后直接更新编辑器的 html 内容？</p> <p><a href="https://codesandbox.io/p/sandbox/vibrant-rain-7762dl?file=%2Fpages%2Findex.vue%3A32%2C1-32%2C39" rel="nofollow noreferrer">沙盒链接</a></p> </question> </body></html>

javascript vue.js nuxt.js vuejs3 tinymce

回答 0 投票 0

导入模块内的别名在本地 nuxt 模块中不起作用

我的情况如下。我正在构建一个用于不和谐集成的 nuxt 模块。我需要遍历文件系统并从 './server/discord/events' 文件夹导入文件，然后绑定 t...

nuxt.js nuxtjs3

回答 0 投票 0

Vue 功能组件内导入组件

我在组件目录中有一个名为 SpotifyButton 的组件，如下所示：我在 SpotifyButton 目录中有一个名为 components 的组件，如下所示： <template functional> <b-button pill size="sm" :href="props.spotifyUri" class="spotify-green"> <b-img-lazy src="~/assets/Spotify_Icon_RGB_White.png" height="20" width="20" /> View on Spotify </b-button> </template> <script lang="ts"> import Vue from 'vue'; export default Vue.extend({ name: 'SpotifyButton', props: { spotifyUri: { type: String, required: true } } }); </script> 我可以像这样在 pages 目录中的组件中导入和使用它，没有任何问题： <template> <spotify-button :spotify-uri="artist.uri"/> </template> <script lang="ts"> import Vue from 'vue'; import { Context } from '@nuxt/types'; import FullArtist from '@/types/FullArtist'; import SpotifyButton from '@/components/SpotifyButton.vue'; export default Vue.extend({ name: 'ArtistPage', components: { SpotifyButton }, async asyncData({ $axios, params, error }: Context) { try { const artist: FullArtist = await $axios.$get(`/api/artists/${params.id}`); return { artist }; } catch (e) { error({ statusCode: 404, message: 'Artist not found' }); } }, data() { return { artist: { name: '' } as FullArtist }; } }); </script> 但是，如果我尝试以相同的方式将 SpotifyButton 导入到 components 目录中的另一个组件中，则会收到以下错误。这里是ArtistPreview组件，它位于components目录中： <template functional> <spotify-button :spotify-uri="props.artist.uri"/> </template> <script lang="ts"> import Vue, { PropType } from 'vue'; import SpotifyButton from '@/components/SpotifyButton.vue'; import SimpleArtist from '@/types/SimpleArtist'; export default Vue.extend({ name: 'ArtistPreview', components: { SpotifyButton }, props: { artist: { type: Object as PropType<SimpleArtist>, required: true } } }); </script> 我错过了什么吗？为什么在 pages 目录组件中工作得很好的导入在 components 目录组件中却无法工作？发生这种情况是因为我正在使用功能组件。事实证明，如果不采取一些时髦的解决方法，就无法嵌套功能组件。这是 GitHub 问题以及一些解决方案。我采用了第一个解决方案，所以我的 ArtistPreview 组件现在看起来像这样： <template functional> <spotify-button :spotify-uri="props.artist.uri"/> </template> <script lang="ts"> import Vue, { PropType } from 'vue'; import SpotifyButton from '@/components/SpotifyButton.vue'; import SimpleArtist from '@/types/SimpleArtist'; Vue.component("spotify-button", SpotifyButton); export default Vue.extend({ name: 'ArtistPreview', props: { artist: { type: Object as PropType<SimpleArtist>, required: true } } }); </script> 搭配： import SpotifyButton from '~/components/SpotifyButton.vue' 使用 Typescript 最好使用另一种方法：添加“nuxt-property-decorator”并遵循他的流程。因此，您定义组件如下： <script lang="ts"> import { Component, Vue } from 'nuxt-property-decorator' import SpotifyButton from '~/components/SpotifyButton.vue' @Component({ components: { SpotifyButton }, }) class AnotherComponent extends Vue { ... } export default AnotherComponent </script> [Nuxt Property Decorator on Github][1] I think is important to read the official [Nuxt Typescript documentation][2] to a proper setup. I hope it helps! [1]: https://github.com/nuxt-community/nuxt-property-decorator [2]: https://typescript.nuxtjs.org/ 如您所知，函数组件不支持 components 属性。有一些解决方法，下面的方法过去对我有用。您可以使用inject来避免污染道具。 <template functional> <div> <component :is="injections.components.CoolComponent"></component> </div> </template> <script> import CoolComponent from "./CoolComponent.vue"; export default { functional: true, inject: { components: { default: { CoolComponent } } } }; </script> 或者，您可以使用 JSX。 import CoolComponent from "./CoolComponent.vue"; export default { functional: true, render (h) { return ( <div> <CoolComponent></CoolComponent> </div> ) } };

vue.js nuxt.js

回答 3 投票 0

Vite：是否可以排除代码元素的构建？

我正在寻找 Vite 中的一个“功能”，它允许我从构建中排除一些代码。据我记得在 webpack 中有一个功能，你可以创建一些评论，例如......

javascript vue.js nuxt.js vite

回答 1 投票 0

将 NuxtJS3 中的链式 useFetch 查询转换为 useLazyFetch

我又回到了前端 Web 开发，我认为尝试使用 NuxtJS 3 作为我的第一个框架会很有趣。我是一名后端开发人员（PHP、GoLang、C#），只是想学习一些新东西，所以我的

nuxt.js nuxtjs3 nuxt3

回答 0 投票 0

Nuxt 3 从 api 调用返回动态 JSON 文件

所以我的assets文件夹下有一些json文件。我希望能够动态调用这些文件。我不知道我这样做是否正确，但我想到的做法是调用 api，以便...

typescript vue.js nuxt.js

回答 0 投票 0

如何为Vue 2,7添加Vuex 3？

当我运行时：yarn create nuxt-app 我在 package.json 中看到我有： “依赖项”：{ "nuxt": "^2.15.8", "vue": "^2.7.10", }, 我需要使用...

vue.js vuejs2 nuxt.js vuex

回答 0 投票 0

我想在Nuxt3上使用微前端，我该怎么办？

我想在Nuxt3上使用微前端，我该怎么办？导出默认值{ 组件：真实，建造： { 联邦：{ 名称：'主机'，优先级：1，活动：真，/ 远程: '远程@http://localhost:8001', }, },

nuxt.js

回答 0 投票 0

为什么在 Nuxt v3 上动态加载资源失败

我遇到了一个奇怪的情况，我有一个带有 vite 的“标准”Nuxt v3 项目作品我遇到了一个奇怪的情况，我有一个“标准”Nuxt v3项目，带有vite 有效 <img src="~/assets/img/image.png"> <img src="~/assets/video/video.mp4"> 不起作用 <img :src="require('~/assets/img/image.png')"> <img :src="require('~/assets/video/video.mp4')"> 请注意，图像路径是相同的，因此它确实存在，我收到的错误是：找不到模块“@/assets/img/image.png”需要堆栈文档没有提及为了实现它而必须做的任何事情有什么我应该做的吗？在Vite中，不使用require功能。相反，您应该使用 import 语句（Vite 是 Nuxt 3 的默认模块捆绑器。）有两个问题：构建完成后，Nuxt 将更改资产目录和文件名。动态使用时，别名不会转换为绝对路径。所以你甚至不能这样做： <img :src="`_nuxt/assets/img/${imageName}`"> 在开发模式期间，它可以工作，但在构建之后就不行了。解决方案1 您可以导入图像，然后像这样使用它们： <script lang="ts" setup> //@ts-ignore import image1 from "../assets/images/image1.jpg"; //@ts-ignore import image2 from "../assets/images/image2.jpg"; //@ts-ignore import image3 from "../assets/images/image3.jpg"; const images = [ image1, image2, image ] </script> 解决方案2 我找到了这个方法： <script> const glob = import.meta.glob("~/assets/images/how-to-use/*", { eager: true, }); const getImageAbsolutePath = (imageName: string): string => { return glob[`/assets/images/how-to-use/${imageName}`]["default"]; }; </script> 您可以将您的imageName（不要忘记扩展名）传递给此函数并检索绝对路径。即使在构建之后，这种方法也能继续正常运行。解决方案3 您可以将图像放在public目录了解更多：https://nuxt.com/docs/getting-started/assets/#public-directory public/目录内容按原样在服务器根目录提供。

javascript nuxt.js assets vite nuxtjs3

回答 1 投票 0

如何更改 Vuetify 3 的工具提示背景？

我正在使用最新版本的 vuetify 和 Nuxt 3。我有一个 vuetify.js 插件： `//插件/vuetify.js 从“vuetify”导入{createVuetify}；从“vuetify/

nuxt.js vuetify.js

回答 1 投票 0

与 nuxt3 相关的 CSS 问题

关于nuxt3的问题，我在nuxt.config.ts中引入的css，打包后，这个文件中的css都是内部样式。有什么办法可以将其放在链接中吗？输入图像描述她...

vue.js nuxt.js nuxtjs3

回答 0 投票 0

无法启动Nuxt：无法读取未定义的属性（读取'srcDir'）

说明：我在尝试启动 Nuxt.js 应用程序时遇到错误。我看到的错误消息如下：无法启动 nuxt：无法读取未定义的属性（正在读取 'src...