nuxt.js 相关问题

如何在 nuxtjs 3 中使用文件夹中的布局？

我正在使用 NuxtJs 3 开发一个应用程序。在 nuxt 3 中，布局功能已更改。我们可以通过使用布局，这个layoutName位于layouts文件夹中。我的

Nuxt 3 Axios 和 Fetch API 不断无故取消

我正在使用Nuxt 3。 我同时使用 Axios 和 Fetch API。 我将 Axios 用于 Laravel API 我将 Fetch API 用于 Nuxt 3 服务器 API。 这是两天前工作的。但出于某种原因，两者似乎都

使用插件的 Nitro DB 初始化模式，这有意义吗？ （nuxt，mysql）

初始化数据库连接然后将其附加到插件内的 nitroApp 上下文的概念有意义吗？ 用法来自 api/hello ，它执行 { db} = useNitroApp() 这确实有效，我只是

只有最后一个 v-for 元素会被更新，而所有元素都应该被更新

导航中的 3 个页面链接应由用户选择以 3 种语言显示。在初始页面加载中它工作正常。然后单击一种语言更改链接，然后再次正常工作。但是当我点击

Nuxt 2 中使用 css 模块和 extractCSS 进行类复制

我将 nuxt 2 与 css 模块一起使用，当我将一个 css 模块与多个组件一起使用时，会导致多个 css 文件具有相同的类 你好.vue 我将 nuxt 2 与 css 模块一起使用，当我将一个 css 模块与多个组件一起使用时，会导致多个 css 文件具有相同的类 你好.vue <template> <div :class="$style.title">Hello, World</div> <div :class="$second.secondClass">Hello, World</div> </template> <script> export default {} </script> <style module src="./hello.css"></style> <style module="$second" src="./uncommon.css"></style> 再见.vue <template> <div :class="$style.title">Goodbye, World</div> <div :class="$second.secondClass">Goodbye, World</div> </template> <script> export default {} </script> <style module src="./goodbye.css"></style> <style module="$second" src="./uncommon.css"></style> 结果我有两个包含内容的文件 在两个文件中我有相同的类.YT3xv 我可以做点什么吗？在完美的情况下，我想在单独的文件中提取类似的类 您可以创建一个单独的 CSS 文件（例如，shared.css），在其中定义共享类。 我认为你的项目结构是这样的： - assets - css - shared.css - components - Hello.vue - Goodbye.vue - nuxt.config.js 在shared.css中，定义您的共享类： /* shared.css */ .sharedClass { /* styles */ } 在 nuxt.config.js 中，指定 extractCSS 选项以将 CSS 提取到单独的文件中： // nuxt.config.js export default { // other configurations build: { extractCSS: true } } 然后，在您的组件中，导入shared.css： <!-- Hello.vue --> <template> <div :class="$style.title">Hello, World</div> <div :class="$style.sharedClass">Hello, World</div> </template> <script> export default {} </script> <style module src="./hello.css"></style> <style src="~/assets/css/shared.css"></style> <!-- Goodbye.vue --> <template> <div :class="$style.title">Goodbye, World</div> <div :class="$style.sharedClass">Goodbye, World</div> </template> <script> export default {} </script> <style module src="./goodbye.css"></style> <style src="~/assets/css/shared.css"></style> 通过此设置，Nuxt.js 将在构建过程中自动将 shared.css 中定义的共享类提取到单独的 CSS 文件中。

解决Swiper在Nuxt.js中的coverflow效果问题

我正在尝试做一个具有swiper的coverflow效果的滑块，但它总是显示一个默认滑块，如果我放置或不放置效果它总是相同的。 我是 nuxt 的新手，有人有任何想法，我

解决Swiper在Nuxt.j中的coverflow效果问题

我正在尝试做一个具有swiper的coverflow效果的滑块，但它总是显示一个默认滑块，如果我放置或不放置效果它总是相同的。 我是 nuxt 的新手，有人有任何想法，我

Nuxt3 中使用 CSS 无法实现页面之间的转换

我找不到页面更改时的任何过渡效果。 应用程序.vue： .page-enter-active, .page-leave-</desc> <question vote="0"> <p>我找不到页面更改时的任何过渡效果。</p> <p>app.vue：</p> <pre><code>&lt;template&gt; &lt;div&gt; &lt;NuxtPage /&gt; &lt;/div&gt; &lt;/template&gt; &lt;style&gt; .page-enter-active, .page-leave-active { opacity: 1; transition: opacity 0.5s ease-in-out; } .page-enter-from, .page-leave-to { opacity: 0; } &lt;/style&gt; </code></pre> <p>/pages/index.vue：</p> <pre><code>&lt;template&gt; &lt;div&gt; &lt;h1&gt;Home page&lt;/h1&gt; &lt;NuxtLink to=&#34;/about&#34;&gt;About page&lt;/NuxtLink&gt; &lt;/div&gt; &lt;/template&gt; </code></pre> <p>/pages/about.vue：</p> <pre><code>&lt;template&gt; &lt;div&gt; &lt;h1&gt;About page&lt;/h1&gt; &lt;NuxtLink to=&#34;/&#34;&gt;Home page&lt;/NuxtLink&gt; &lt;/div&gt; &lt;/template&gt; </code></pre> <p>期待页面逐渐显示。</p> </question> <answer tick="false" vote="0"> <p>在<pre><code>nuxt.config.ts</code></pre>中添加配置，成功了。</p> <pre><code>export default defineNuxtConfig({ app: { pageTransition: { name: &#39;page&#39;, mode: &#39;out-in&#39; } }, }) </code></pre> </answer> </body></html>

Nuxt 3 中的布局/组件中未定义路由参数

我遇到了 Nuxt 3 中组件/布局中未定义路由参数的问题。这看起来像是一个错误，但它是一个非常严重的错误，我几乎不相信它会是一个错误。 考虑...

RollupError：意外字符“�”（请注意，您需要插件来导入非 JavaScript 文件）

我有一个 Nuxt3 应用程序运行得很好。现在，每当我构建项目以便能够部署它时，我都会收到以下错误： 错误 RollupError：意外的字符“�”（请注意，您需要 p...

如何更改nuxtjs3中的默认顺风字体系列

我创建了一个Nuxt3项目并安装了@nuxtjs/tailwindcss包。我想将我最喜欢的字体设置为默认字体。我读了顺风文档，但我不明白问题出在哪里......

无法从注册表下载模板：初始化 nuxt 项目时获取失败

npx nuxi@最新 init b 客户端 错误错误：无法从注册表下载模板：获取失败 我修改了host文件，但是没有用。 我修改了 DNS 配置文件，但没有用。 我都用了

NUXT3 服务器/api 参数导致生产时出现 500 错误

我目前正在开发一个NUXT3项目，我有一个表单可以收集信息和文件并在发布到相关位置之前发送到服务器/api。 在本地，这按预期工作，...

Nuxt.js 上的 useFetch 无法获取响应标头

现在我正在尝试实现一个util函数来通过API获取CSRF令牌（服务器端是Laravel with Sanctum）。 我使用 useFetch 但无法获取响应标头值。 我检查了客户端的日志...

我需要在 nuxtjs 上使用 JSZip 为多个文件制作 zip

我想在nuxtjs上使用JSZip为多个文件制作zip，我希望将文件转换为base64格式为pdf，文件格式也可以是任何。如果所有文件都是jpg，那么它会转换为jpeg...

如何添加动画并在表格中闪烁新添加的行，同时保持所有其他行样式不变？

我在基于 Nuxt 3 或 Vue 3 的应用程序中使用 HTML 表，并通过单击按钮向其中添加一行。 当我添加新行时，我想添加一种过渡/动画，以便...

如何在组件中可用的defineNuxtModule中配置全局sass变量？

我希望在defineNuxtModule中为我的组件创建全局sass变量（Nuxt 3） 我正在使用 Nuxt 3，现在尝试制作自己的模块。但我不明白如何为我的

在具有单独登录布局的 Nuxt 3 中间件中导航后布局未更新

我在 Nuxt 3 中遇到一个问题，即在中间件中导航后布局无法正确更新，特别是在登录页面和其他页面使用单独的布局时。这是一个概述...

多次“useFetch”调用会导致错误 Nuxt3

我创建了一个 vueJS 组件并且运行良好。当我现在在我的 标签中添加第二个“useFetch”调用时，它导致了以下错误消息： 需要 </desc> 的可组合项 <question vote="0"> <p>我创建了一个 vueJS 组件并且运行良好。当我现在在我的 <pre><code>&lt;script setup&gt;</code></pre> 标签中添加第二个“useFetch”调用时，它导致了此错误消息：</p> <pre><code>A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more at `https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables`. at Module.useNuxtApp (/Users/user/Code/Personal/universityCheckIn/node_modules/nuxt/dist/app/nuxt.js:216:13) at Module.useAsyncData (/Users/user/Code/Personal/universityCheckIn/node_modules/nuxt/dist/app/composables/asyncData.js:26:38) at Module.useFetch (/Users/user/Code/Personal/universityCheckIn/node_modules/nuxt/dist/app/composables/fetch.js:63:43) at checkIfCheckedIn (/Users/user/Code/Personal/universityCheckIn/pages/check-in.vue:51:50) at init (/Users/user/Code/Personal/universityCheckIn/pages/check-in.vue:75:30) </code></pre> <p>我的<pre><code>&lt;script setup&gt;</code></pre>部分，相关的看起来像这样：</p> <pre><code>&lt;script setup&gt; // General Values const alreadyCheckedIn = ref(false); const showModal = ref(false); const lecture = ref(null); // Modal Values const lectureName = ref(&#34;&#34;); const startTime = ref(&#34;&#34;); // Error handling const displayError = ref(false); const errorMessage = ref(&#34;Please fill in all fields.&#34;); // Fetch lecture data async function fetchLectureData() { const lectureDateObj = new Date(); const lectureDateStr = lectureDateObj.toISOString().split(&#34;T&#34;)[0]; const { data } = await useFetch(&#34;/api/lecture&#34;, { method: &#34;GET&#34;, query: { lectureDate: lectureDateStr, groupId: 1, //TODO: get the group id from the user }, }); if (data.value.statusCode === 404) { return; } return data.value.body ? await JSON.parse(data.value.body) : null; } async function checkIfCheckedIn() { const lectureDateObj = new Date(); const lectureDateStr = lectureDateObj.toISOString().split(&#34;T&#34;)[0]; const { data } = await useFetch(&#34;/api/check-in&#34;, { method: &#34;GET&#34;, query: { lectureDate: lectureDateStr, userId: 1, //TODO: get the user id from the user groupId: 1, //TODO: get the group id from the user }, }); if (data.value.statusCode === 404) { return false; } return true; } // Initialize lecture data async function init() { const lectureFromDB = await fetchLectureData(); if (lectureFromDB) { lecture.value = lectureFromDB; lecture.value.start_time = new Date( lecture.value.start_time ).toLocaleTimeString(&#34;de-DE&#34;, { hour: &#34;2-digit&#34;, minute: &#34;2-digit&#34; }); } alreadyCheckedIn.value = await checkIfCheckedIn(); } init(); . . . </code></pre> <p><pre><code>fetchLectureData()</code></pre>功能首先出现，一切正常。然后我添加了 <pre><code>checkIfCheckedIn()</code></pre> 函数，抛出了所描述的错误。</p> <p>我尝试了它是否依赖于 <pre><code>checkIfCheckedIn()</code></pre> 函数并删除了 <pre><code>fetchLectureData()</code></pre> 函数（因此只有一个“useFetch”调用存在”）并且一切都再次正常。所以问题不依赖于函数本身，而是依赖于事实上有两个“useFetch”调用。</p> <p>如果我尝试使用“useFetch”的方式不可能，我如何在加载页面时进行两个独立的API调用？</p> </question> <answer tick="false" vote="0"> <p>解决了！我在文档中发现以下内容“最重要的是，您必须同步使用它们 - 也就是说，在调用可组合的 [...] 之前不能使用等待”</p> <p>因此，因为两者都是异步操作，其中一个操作会阻塞另一个操作，所以我在可组合项之前调用“await”，这会导致错误。 我使用以下方法来避免在另一个 useFetch 之前调用一个 wait：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>Promise.all([fetchLectureData(), checkIfCheckedIn()]) .then(([lectureFromDB, checkedIn]) =&gt; { if (lectureFromDB) { lecture.value = lectureFromDB; lecture.value.start_time = new Date( lecture.value.start_time ).toLocaleTimeString(&#34;de-DE&#34;, { hour: &#34;2-digit&#34;, minute: &#34;2-digit&#34; }); } alreadyCheckedIn.value = checkedIn; }) .catch((error) =&gt; { console.error(error); });</code></pre> </div> </div> <p></p> </answer> </body></html>

如何配置 NGINX 以在 Docker 容器中为 Directus 提供 Nuxt 3 应用程序服务

我有一个运行 3 个服务的 Docker 容器：NGINX、Nuxt3 和 Directus 10.8。 我正在努力让反向代理正常工作。我可以成功地将 Nuxt 映射到“/”，但我很沮丧......