nuxt.js 相关问题

Nuxt Images 不转换图像

我正在使用 Nuxt 2 和 Nuxt Image（静态提供程序）从我的图像生成 srcset 和 WEBP 格式。我在标记中使用以下组件： 我正在使用 Nuxt 2 和 Nuxt Image（静态提供程序）从我的图像生成 srcset 和 WEBP 格式。我在标记中使用以下组件： <nuxt-picture :src="srcStringVariable" alt="" sizes="medium:66vw large:46.2vw huge:40.788vw" :imgAttrs="{ loading: 'lazy' }" /> 运行 nuxt generate 并查看生成的 HTML 文件后，我看到了预期的结果。 Nuxt Image 创建了图片标签并引用了不同尺寸和格式的生成文件。 <picture> <source type="image/webp" srcset="/_nuxt/image-0933bc.webp 828w, /_nuxt/image-e8832f.webp 300w, /_nuxt/image-a9aa4c.webp 800w" sizes="(max-width: 920px) 90vw, (max-width: 1200px) 25vw, 800px"> <img src="/_nuxt/image-a8dee0.jpeg" srcset="/_nuxt/image-ed5284.jpeg 828w, /_nuxt/image-cb0218.jpeg 300w, /_nuxt/image-a8dee0.jpeg 800w" sizes="(max-width: 920px) 90vw, (max-width: 1200px) 25vw, 800px" alt="" loading="lazy"> </picture> 现在我的问题：如果我正在运行nuxt start并检查源代码，它在开发工具中看起来像这样： <picture> <source type="image/webp" srcset="image.jpg 828w, image.jpg 300w, image.jpg 800w" sizes="(max-width: 920px) 90vw, (max-width: 1200px) 25vw, 800px"> <img src="image.jpg" srcset="image.jpg 828w, image.jpg 300w, image.jpg 800w" sizes="(max-width: 920px) 90vw, (max-width: 1200px) 25vw, 800px" alt="" loading="lazy"> </picture> 所有来源都引用相同的原始图像。当我将其部署到 Netlify 时也会发生这种情况。这是预期的行为吗，我只是没有理解 Nuxt Image 的意义？我的设置或标记有问题吗？ 我的nuxt.config.js文件有以下相关设置： export default { target: 'static', ssr: true, buildModules: ['@nuxt/image'], image: { provider: 'static', staticFilename: '[publicPath]/[name]-[hash][ext]', screens: { tiny: 460, small: 720, medium: 920, large: 1200, huge: 1600, full: 1900, }, }, } 如果有 Nuxt 经验的人可以尝试向我解释这种行为，那将非常有帮助。在我看来，Nuxt Image 的文档非常有限。

如何将 Quasar 添加到现有的 Nuxt 应用程序中？

我想将 Quasar 安装到我现有的 Nuxt 项目中。我一直在阅读类星体文档，他们在安装页面中唯一提到的是他们自己的 CLI，它没有 N 选项...

如何将谷歌分析连接到 Nuxt3 应用程序？

我有问题。我尝试将我的 Nuxt3 应用程序与 Google Analytics 连接起来。 现在我通过将以下代码添加到 nuxt.config.ts 来做到这一点 导出默认 defineNuxtConfig({ 构建模块：[ '@nuxtjs/...

如何在 vue3 模板中显示函数内部的变量

如何在模板中显示变量？我使用 Nuxtjs 3.2 版。 我设置了返回但它没有显示在模板中 倒计时：{{ `${days}` }... 如何在模板中显示变量？我使用 Nuxtjs 版本 3.2. 我设置了返回但它没有显示在模板中 <template> <div> <p> Countdown: {{ `${days}` }} {{ minutes }} {{ seconds }} </p> </div> </template> <script> const countDownDate = new Date("Apr 28, 2023 16:37:52").getTime(); const myfunc = setInterval(function() { const now = new Date().getTime(); var timeleft = countDownDate - now; let days = Math.floor(timeleft / (1000 * 60 * 60 * 24)); let hours = Math.floor((timeleft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); let minutes = Math.floor((timeleft % (1000 * 60 * 60)) / (1000 * 60)); let seconds = Math.floor((timeleft % (1000 * 60)) / 1000); return { days , hours , minutes , seconds} }, 1000) </script> 配合手表效果工作。 <template> <div> <p>Countdown: {{ `${days}` }} {{ hours }} {{ minutes }} {{ seconds }} </p> </div> </template> <script> import { ref, watchEffect } from 'vue'; export default { setup() { const countDownDate = new Date('Apr 28, 2023 16:37:52').getTime(); const days = ref(0); const hours = ref(0); const minutes = ref(0); const seconds = ref(0); watchEffect(() => { const now = new Date().getTime(); const timeleft = countDownDate - now; days.value = Math.floor(timeleft / (1000 * 60 * 60 * 24)); hours.value = Math.floor((timeleft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); minutes.value = Math.floor((timeleft % (1000 * 60 * 60)) / (1000 * 60)); seconds.value = Math.floor((timeleft % (1000 * 60)) / 1000); }); return { days, hours, minutes, seconds }; }, }; </script> 只需使用Vue的反应性 用ref()定义你的变量 const days = ref(0); 并使用.value在您的函数中设置它们： days.value = Math.floor(timeleft / (1000 * 60 * 60 * 24)); 这里是游乐场 const { createApp, ref } = Vue; const countDownDate = new Date("Apr 28, 2023 16:37:52").getTime(); const App = { setup() { const days = ref(0); const hours = ref(0); const minutes = ref(0); const seconds = ref(0); const myfunc = setInterval(function() { const now = new Date().getTime(); var timeleft = countDownDate - now; days.value = Math.floor(timeleft / (1000 * 60 * 60 * 24)); hours.value = Math.floor((timeleft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); minutes.value = Math.floor((timeleft % (1000 * 60 * 60)) / (1000 * 60)); seconds.value = Math.floor((timeleft % (1000 * 60)) / 1000); }, 1000) return { days, hours, minutes, seconds } } } const app = createApp(App); app.mount('#app'); #app { line-height: 1.5; } [v-cloak] { display: none; } <div id="app" v-cloak> <b>Countdown:</b><br/> <p> Days {{ days }}, Hours {{ hours }}, Minutes: {{ minutes }}, Seconds: {{ seconds }} </p> </div> <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <script setup>版本这里.

Nuxt3 “永远不要在 <script setup> 之外定义 ref()”，那怎么办？

来自 nuxt 3 文档， https://nuxt.com/docs/getting-started/state-management 有人告诉我永远不应该在脚本设置之外定义 ref 因为它将“在访问的所有用户之间共享......

如何在新的 Nuxt 3 项目中安装 Vuex？

我需要有人帮助我解释如何在 Nuxt 3 应用程序中安装 Vuex。 当我使用这个命令 npx nuxi init 安装 Nuxt 3 时，我有一个新的 Nuxt 3 应用程序，但是当我想在 Nuxt 中使用 Vuex 时，我不能

静态目录如何通过Nuxt2与CDN协同工作？

我们知道publicPath可以设置为CDN。 启动 nuxt 构建时，将 .nuxt/dist/ 目录的内容上传到您的 CDN！ 但是静态目录中的文件呢？如何定义重新...

如何设置 Nuxt CDN 设置？ [关闭]

[Nuxt2] 我做了： 1: 在 nuxt.config.js 文件中将 publicPath 设置为 CDN url。 2：nuxt build（不是静态网站，不能用nuxt generate）。 问题： (1) .nuxt/dist 目录不包含 ...

在 vue3 模板中显示函数内部的变量

如何在模板中显示变量？我使用 Nuxtjs 3.2 版。 我设置了返回但它没有显示在模板中 倒计时：{{ `${days}` }... 如何在模板中显示变量？我使用 Nuxtjs 版本 3.2. 我设置了返回但它没有显示在模板中 <template> <div> <p> Countdown: {{ `${days}` }} {{ minutes }} {{ seconds }} </p> </div> </template> <script> const countDownDate = new Date("Apr 28, 2023 16:37:52").getTime(); const myfunc = setInterval(function() { const now = new Date().getTime(); var timeleft = countDownDate - now; let days = Math.floor(timeleft / (1000 * 60 * 60 * 24)); let hours = Math.floor((timeleft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); let minutes = Math.floor((timeleft % (1000 * 60 * 60)) / (1000 * 60)); let seconds = Math.floor((timeleft % (1000 * 60)) / 1000); return { days , hours , minutes , seconds} }, 1000) </script> 只需使用Vue的反应性 用ref()定义你的变量 const days = ref(0); 并使用.value在您的函数中设置它们： days.value = Math.floor(timeleft / (1000 * 60 * 60 * 24)); 这里是游乐场 const { createApp, ref } = Vue; const countDownDate = new Date("Apr 28, 2023 16:37:52").getTime(); const App = { setup() { const days = ref(0); const hours = ref(0); const minutes = ref(0); const seconds = ref(0); const myfunc = setInterval(function() { const now = new Date().getTime(); var timeleft = countDownDate - now; days.value = Math.floor(timeleft / (1000 * 60 * 60 * 24)); hours.value = Math.floor((timeleft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); minutes.value = Math.floor((timeleft % (1000 * 60 * 60)) / (1000 * 60)); seconds.value = Math.floor((timeleft % (1000 * 60)) / 1000); }, 1000) return { days, hours, minutes, seconds } } } const app = createApp(App); app.mount('#app'); #app { line-height: 1.5; } [v-cloak] { display: none; } <div id="app" v-cloak> <b>Countdown:</b><br/> <p> Days {{ days }}, Hours {{ hours }}, Minutes: {{ minutes }}, Seconds: {{ seconds }} </p> </div> <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> 配合手表效果工作。 <template> <div> <p>Countdown: {{ `${days}` }} {{ hours }} {{ minutes }} {{ seconds }} </p> </div> </template> <script> import { ref, watchEffect } from 'vue'; export default { setup() { const countDownDate = new Date('Apr 28, 2023 16:37:52').getTime(); const days = ref(0); const hours = ref(0); const minutes = ref(0); const seconds = ref(0); watchEffect(() => { const now = new Date().getTime(); const timeleft = countDownDate - now; days.value = Math.floor(timeleft / (1000 * 60 * 60 * 24)); hours.value = Math.floor((timeleft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); minutes.value = Math.floor((timeleft % (1000 * 60 * 60)) / (1000 * 60)); seconds.value = Math.floor((timeleft % (1000 * 60)) / 1000); }); return { days, hours, minutes, seconds }; }, }; </script>

How to Deploye Nuxt.js app on google cloud run with intellij pluging

我尝试部署 Nuxt 我的应用程序在谷歌上可以运行，使用 intellij 插件 构建 [gcr.io/webapp-378307/differenceapp] 成功 /home/ludow/.cache/google-cloud-tools-java/managed-cloud-sdk/LATEST/go...

使用 Vue.component 时出现“超出最大调用堆栈大小”

这是一个非常奇怪的。 我通过 asyncData 挂钩从无头 CMS 检索了一些 HTML，我通过动态组件显示这些 HTML，如下所示（为简洁起见被截断）： </desc> <question vote="0"> <p>这是一个非常奇怪的。</p> <p>我通过 <pre><code>asyncData</code></pre> 挂钩从无头 CMS 检索了一些 HTML，并且我通过动态组件显示它们，如下所示（为简洁起见被截断）：</p> <pre><code>&lt;script&gt; import {apiReq} from &#39;~/assets/js/utils&#39; import Vue from &#39;vue&#39; export default { data() { return { }}, async asyncData(ctx) { let req = await apiReq.call(ctx, &#39;getMeta&#39;, {uri: ctx.route.params.article}, true); if (req === null) return; let contentComp = Vue.component(&#39;test&#39;, {template: &#39;&lt;div&gt;&#39;+req.data.content+&#39;&lt;/div&gt;&#39;}) return {article: req.data, contentComp} }, methods: {} } &lt;/script&gt; </code></pre> <p>...并通过以下方式呈现在我的模板中：</p> <pre><code>&lt;component :is=&#39;contentComp&#39;&gt;&lt;/component&gt; </code></pre> <p>我使用的是动态组件而不是简单的<pre><code>v-html</code></pre>，因为获取的 HTML 包含对应该呈现的子组件的引用。</p> <p>以上导致“超出最大调用堆栈大小”错误。如果我杀死创建动态组件的 JS 行 (<pre><code>Vue.component(...</code></pre>) 一切都很好并且页面加载。 API 请求没有问题 - 使用 200 可以很好地获取数据。</p> <p>如果我保留 JS 行但删除 <pre><code>&lt;component...</code></pre> 渲染行，错误仍然存在，所以错误似乎来自动态组件的创建，而不是它的渲染。</p> <p>这发生<em>both</em>与<pre><code>target</code></pre>设置为“服务器”和“静态”。</p> </question> </body></html>

如何在 nuxt3 应用程序中实现平滑滚动

我是nuxt3的菜鸟，我不知道如何实现平滑滚动。我在 ~/app/ 中添加了一个 route.options.ts 文件并对其进行了测试，但没有成功...... 这是我的 route.options.ts 文件： 我...

关于Nuxt CDN设置的两个问题

Nuxt2 1: 在 nuxt.config.js 文件中将 publicPath 设置为 CDN url。 2：nuxt build（不是静态网站，不能用nuxt generate）。 问题： (1) .nuxt/dist 目录不包含 css/image...

使用 Nuxt.js 和 Firebase 中间件进行身份验证

我有一个 Nuxt Js 3 + Firebase 项目。在这个项目中，需要登录才能访问管理面板。 我在下面编写的代码部分工作正常。 但是，正如您在 Gif 中看到的那样，当 ...

如何在使用 Supabase Auth 登录 Google 时添加额外的用户元数据？

我想从登录用户的 Google 个人资料中获取名字和姓氏。经检查，Google 使用的是 givenName 和 familyName。是否有可能只用 Supabase alon 来做这个......

我想在 v-for 中包装 firebase 图像路径

我不是开发人员，所以这个问题可能看起来很愚蠢。我请求你的理解。 有一个带有 v-for 的现有代码 v-tab-item( v-for="(item, index) in getCharacterSkinList" :k...

结果缺少分析属性

阿波罗：{ 分析：gql` 查询 getAnalyticsViews { 查看器{ 区域（过滤器：{zoneTag：“标签”}）{

有没有办法在 NuxtJs 中使用 SSR 模式而无需任何服务器端请求？

问题： SSR 比 CSR 有一些好处，这是我想要的；例如，页面元标记在原始响应中而不是在呈现的响应中传递给客户端。然而，由于某些原因...

使用 Chrome Devtools 调试性能

我有一个启用了源映射的 Nuxt 应用程序正在生产中。当我尝试使用 chrome devtools 上的性能选项卡进行调试时，我看到的只是 VueJS 例如，我有一个需要大约 255 毫秒的任务，当我...

无法在vue端显示express res.send()自定义的错误信息。

我有一个nuxt的应用程序与express和mySQL。问题：我无法在vue端显示express res.send()自定义错误信息 让我们假设我想显示一个单一用户的信息。这里...