nuxt.js 相关问题

当我使用 Nuxtjs (SSR) 时，为什么我会在 devtools 的网络选项卡中看到我的请求

我正在使用 nuxt 3.11.1，当我尝试从服务器端发送请求时，我仍然在网络选项卡中看到请求，这让我怀疑我是否正确发送了它们。 我有写...

如何在 Vue Nuxt 3 项目中包含外部 javascript [StatCounter]？

我需要在 Nuxt 3 项目中包含以下代码，但我似乎无法让它工作： var sc_project=XXXXXXXX; var sc_invisible=1; var sc_se...</desc> <question vote="2"> <p>我需要在 Nuxt 3 项目中包含以下代码，但我似乎无法让它工作：</p> <pre><code>&lt;script type=&#34;text/javascript&#34;&gt; var sc_project=XXXXXXXX; var sc_invisible=1; var sc_security=&#34;XXXXXXXX&#34;; &lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://www.statcounter.com/counter/counter.js&#34; async&gt;&lt;/script&gt; &lt;noscript&gt;&lt;div class=&#34;statcounter&#34;&gt;&lt;a title=&#34;Web Analytics Made Easy - Statcounter&#34; href=&#34;https://statcounter.com/&#34; target=&#34;_blank&#34;&gt;&lt;img class=&#34;statcounter&#34; src=&#34;https://c.statcounter.com/XXXXXX/0/XXXXXX/1/&#34; alt=&#34;Web Analytics Made Easy - Statcounter&#34; referrerPolicy=&#34;no-referrer-when-downgrade&#34;&gt;&lt;/a&gt;&lt;/div&gt;&lt;/noscript&gt; &lt;!-- End of Statcounter Code --&gt; </code></pre> <p>在 Vue（没有 Nuxt）中，有/曾经有一个 <pre><code>index.html</code></pre> 页面，我曾经在其中放置此代码，但 Nuxt 3 项目中不再有 <pre><code>index.html</code></pre> 文件。</p> </question> <answer tick="true" vote="4"> <h1>useHead()</h1> <p>您可以在 <pre><code>app.vue</code></pre> 文件的脚本中使用它：</p> <pre><code>useHead({ script: [ { src: &#34;https://www.statcounter.com/counter/counter.js&#34;, body: true }, { children: &#34;var sc_project=XXXXXXXX; var sc_invisible=1; var sc_security=&#39;XXXXXXXX&#39;; &#34;, body: true, }, ], noscript: [ { children: &#34;&lt;div class=&#39;statcounter&#39;&gt;&lt;a title=&#39;Web Analytics Made Easy - Statcounter&#39; href=&#39;https://statcounter.com/&#39; target=&#39;_blank&#39;&gt;&lt;img class=&#39;statcounter&#39; src=&#39;https://c.statcounter.com/XXXXXX/0/XXXXXX/1/&#39; alt=&#39;Web Analytics Made Easy - Statcounter&#39; referrerPolicy=&#39;no-referrer-when-downgrade&#39;&gt;&lt;/a&gt;&lt;/div&gt;&#34;, body: true, }, ], }); </code></pre> <p><strong>了解更多：<a href="https://nuxt.com/docs/getting-started/seo-meta#components" rel="nofollow noreferrer">https://nuxt.com/docs/getting-started/seo-meta#components</a></strong></p> <p>或</p> <h1>应用程序配置</h1> <p>在您的<pre><code>nuxt.config.ts</code></pre>文件中使用它：</p> <pre><code>export default defineNuxtConfig({ app: { head: { htmlAttrs: { dir: &#34;ltr&#34;, lang: &#34;en&#34; }, link: [{ rel: &#34;icon&#34;, type: &#34;image/x-icon&#34;, href: &#34;/favicon.ico&#34; }], script: [ { src: &#34;https://www.statcounter.com/counter/counter.js&#34;, body: true }, { children: &#34;var sc_project=XXXXXXXX; var sc_invisible=1; var sc_security=&#39;XXXXXXXX&#39;; &#34;, body: true, }, ], noscript: [ { children: &#34;&lt;div class=&#39;statcounter&#39;&gt;&lt;a title=&#39;Web Analytics Made Easy - Statcounter&#39; href=&#39;https://statcounter.com/&#39; target=&#39;_blank&#39;&gt;&lt;img class=&#39;statcounter&#39; src=&#39;https://c.statcounter.com/XXXXXX/0/XXXXXX/1/&#39; alt=&#39;Web Analytics Made Easy - Statcounter&#39; referrerPolicy=&#39;no-referrer-when-downgrade&#39;&gt;&lt;/a&gt;&lt;/div&gt;&#34;, body: true, }, ], }, }, </code></pre> <p><strong>了解更多：<a href="https://nuxt.com/docs/api/configuration/nuxt-config#head" rel="nofollow noreferrer">https://nuxt.com/docs/api/configuration/nuxt-config#head</a></strong></p> <h1>组件</h1> <p>在模板中使用 <pre><code>&lt;NoScript&gt;</code></pre> 和 <pre><code>&lt;Script&gt;</code></pre> 组件：</p> <pre><code>&lt;template&gt; &lt;Script :body=&#34;true&#34;&gt; var sc_project=XXXXXXXX; var sc_invisible=1; var sc_security=&#34;XXXXXXXX&#34;; &lt;/Script&gt; &lt;Script type=&#34;text/javascript&#34; src=&#34;https://www.statcounter.com/counter/counter.js&#34; :async=&#34;true&#34; &gt;&lt;/Script&gt; &lt;NoScript :body=&#34;true&#34;&gt; &lt;div class=&#34;statcounter&#34;&gt; &lt;a title=&#34;Web Analytics Made Easy - Statcounter&#34; href=&#34;https://statcounter.com/&#34; target=&#34;_blank&#34; &gt;&lt;img class=&#34;statcounter&#34; src=&#34;https://c.statcounter.com/XXXXXX/0/XXXXXX/1/&#34; alt=&#34;Web Analytics Made Easy - Statcounter&#34; referrerPolicy=&#34;no-referrer-when-downgrade&#34; /&gt;&lt;/a&gt; &lt;/div&gt; &lt;/NoScript&gt; &lt;/template&gt; </code></pre> <p><strong>了解更多：<a href="https://nuxt.com/docs/getting-started/seo-meta#body-tags" rel="nofollow noreferrer">https://nuxt.com/docs/getting-started/seo-meta#body-tags</a></strong></p> <p>结果将是这样的： <a href="https://i.sstatic.net/A00Ya.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvQTAwWWEucG5n" alt="enter image description here"/></a></p> </answer> </body></html>

Pinia 商店参考符号

当我在 Nuxt3 项目中使用 Pinia 时： const {isSomeFlag} = storeToRefs(someStore); 我看到这种类型的 isSomeFlag isSomeFlag：参考<{ value: boolean [RefSymbol]: true }> 反而 是一些...

使用 Nuxt3 中 @types 文件夹中的打字稿类型

据我了解。在 TypeScript 中使用 JavaScript 库的建议方法是从 npm 安装相应的 *.d.ts 文件。这些通常可以在@types/命名空间中找到。 这有效

Nuxt 3 动态索引页面路由

如何让页面索引路由动态化？哪个文件夹结构允许重现此行为？ 例如'/'、'/about'、'/register'等仅适用于pages/index.vue项目目录。 我想要...

如何使用 Nuxt VueFire Session Cookie 与 App Check 和浏览器密钥限制？

我正在尝试按照文档使用会话 Cookie 来实现 Nuxt VueFire。 这是我在 nuxt.config.ts 中的 runtimeConfig 和 vuefire 配置对象： 运行时配置：{ 民众： { // Nuxt 自动

如何在 VSCode 中不显式导入的情况下自动识别 Nuxt.js 项目中的类型定义？

我正在使用 TypeScript 开发 Nuxt.js 项目，但遇到了 VSCode 无法自动识别我的类型定义的问题。我想避免在每个文件中显式导入类型......

检测内部/部分组件内的路由变化（Nuxt 2.14 中的 VueRoute 3）

环境 有一个遗留的 nuxt (v2.14.6) 项目，其中包含 vue-route (v3.4.3)、模块 nuxt-i18n (v6.15.1) 和 vuetify (v2.7.2)。确实...这里有一些历史！ 正在通过 pus 进行页面更改...

如何编写一个可在客户端和服务器上运行的简单 Nuxt 3 可组合项

我正在努力寻找一种方法来编写可在客户端和服务器端工作的简单可组合项。我有一个简单的功能，可以简单地收集我想要的应用程序首选项...

Nuxt 3 将包含 JSON 文件的文件夹添加到构建中，以便使用 `fs` 进行读取

该项目有一个data文件夹，其中存储了许多带有配置的json文件。根据 api 请求（内置于 nuxt 3 中），我读取某个 JSON 文件（使用 fs）并输出 r...

在 Nuxt 3 中使用可组合项对组件进行 Vitest 单元测试

我正在尝试在基于 Nuxt 3 构建的项目中开始使用 Vitest 测试组件。 我对使用可组合项的组件有疑问。 组件/Main/Navbar.vue： ... 常量 {</desc> <question vote="0"> <p>我正在尝试在基于 Nuxt 3 构建的项目中开始使用 Vitest 测试组件。 我对使用可组合项的组件有疑问。</p> <p>组件/主/Navbar.vue：</p> <pre><code>... &lt;script setup&gt; const {customRoute} = useCustomRoute() ... &lt;/script&gt; </code></pre> <p>composables/useCustomRoute 是我的可组合项，带有代码：</p> <pre><code>export const useCustomRoute = () =&gt; { ... const {locale} = useI18n() const localeRoute = useLocaleRoute() const customRoute = (route) =&gt; { const createdRoute = localeRoute({ name: route.routeName, params: { type: route.translations[locale.value] } }) return createdRoute.fullPath } ... return { customRoute, ... } </code></pre> <p>测试/组件/Main/Navbar.test.ts：</p> <pre><code>import {it, expect,describe} from &#39;vitest&#39; import {MainNavbar} from &#34;#components&#34;; describe(&#39;MainNavbar&#39;, () =&gt; { // THIS WORKS NORMALLY, THE TEST IS CORRECT expect(MainNavbar).toBeTruthy() // BUT WHEN I ADD THESE TWO LINES THEN TEST IS FAILED const wrapper = await mountSuspended(MainNavbar) expect(wrapper.html()).toContain(&#39;number&#39;) }) </code></pre> <p>（我注意到 MainNavbar.vue 组件包含“number”一词，因为删除上面两行后（constwrapper = .... & Expect(....)），测试通过）</p> <p>运行测试后，出现错误：</p> <pre><code>SyntaxError: Need to install with `app.use` function </code></pre> <p>我的发现： 当我从 MainNavbar.vue 中删除这一行（其可组合项的导入）：</p> <pre><code>const {customRoute} = useCustomRoute() </code></pre> <p>...测试通过。</p> <p>我尝试了很多选项，例如模拟可组合项。</p> <pre><code>mockNuxtImport(&#39;useCustomRoute&#39;, () =&gt; { return useCustomRoute }) </code></pre> <p>或</p> <pre><code>afterEach(() =&gt; { vi.unstubAllGlobals() }) </code></pre> <p>或</p> <pre><code>vi.stub(&#39;../../composables/useCustomRoute&#39;, async (original) =&gt; { const composable = await original() return { // @ts-ignore ...composable, customRoute: vi.fn() } }) </code></pre> <p>或</p> <pre><code>vi.stubGlobal(&#34;useCustomRoute&#34;, () =&gt; ({ $fmt: { customRoute: vi.fn() }, })); </code></pre> <p>或</p> <pre><code>vi.stubGlobal(&#39;useCustomRoute&#39;, () =&gt; ({ customRoute: () =&gt; &#39;&#39; })) </code></pre> <p>请帮助我运行测试，以便使用可组合项的组件也可以得到测试。谢谢。</p> <p>vitest.config.ts</p> <pre><code>import { defineVitestConfig } from &#39;@nuxt/test-utils/config&#39; export default defineVitestConfig({ test: { environment: &#39;nuxt&#39;, }, }) </code></pre> </question> <answer tick="false" vote="0"> <p>我的完整代码：Navbar.test.ts</p> <pre><code>import {it, expect, describe} from &#39;vitest&#39; impomt {mockNuxtImport, mountSuspended} from &#34;@nuxt/test-utils/runtime&#34;; import {MainNavbar} from &#34;#components&#34;; mockNuxtImport(&#39;useCustomRoute&#39;, () =&gt; { return useCustomRoute() }) describe(&#39;MainNavbar&#39;, () =&gt; { it(&#39;should mount&#39;, async () =&gt; { expect(MainNavbar).toBeTruthy() const wrapper = await mountSuspended(MainNavbar) expect(wrapper.html()).toContain(&#39;number&#39;) }); }) </code></pre> </answer> </body></html>

使用 traefik PathPrefix 与 docker 一起部署的 NuxtJs 不会检测页面

我们在使用 docker 和 traefik 的 PathPrefix('/blog') 部署的 NuxtJs 项目中拥有博客，因此不是从 https://example.com/ 提供服务，而是从 https://example.com/blog/ 版本：&quo...

Nuxt SSR DEV 模式：proxyRequest 不适用于节点 19+（适用于 18）

我的 Nuxt 3 应用程序中的这个包罗万象的服务器中间件适用于 Node 18： 服务器/api/[...].ts 从 'ufo' 导入 { joinURL }; 导出默认的defineEventHandler((事件) => { 常量配置 =

如何在Nuxt Js中使用Google Map API？

这是我在 Nuxt.Js 中获取 API 的代码。我已经编写了用于调用 API 的代码，但没有得到结果。我也没有得到任何与此相关的资源。 一个...

Swiper.js，无法点击分页中的项目符号

子弹仍然按照图像工作和移动，但不会按照图像循环。如果我点击项目符号，它就会冻结，如果我继续点击它。它会消失。我认为是

Nuxt3 useFetch 水合已完成，但包含不匹配错误

如果我在 onMounted 上使用 CustomFetch 并重新加载页面，则会出现错误“水合已完成但包含不匹配”。出现。但是，如果我重定向到该页面，则 useCustomFetch 可以正常工作，无需

Pinia 与 Nuxt 3 不兼容的问题

您好，我目前在 Nuxt3 中集成 pinia 时遇到问题，每当我运行 npm run dev 时，它都会向我发出警告。 警告 由于不兼容问题，模块 pinia 被禁用： - [桥] N...

使用 laravel 和 nuxt js 的多租户显示公司徽标时出现问题

我的项目中安装了 Laravel 租户，因此我的图像已正确上传并存储在特定租户文件夹的存储文件夹中，然后是图像名称！但我怎样才能...

通过另一个对话框（模态）打开 Healdess UI 对话框（模态）会自动关闭前一个对话框（模态）吗？ （添加了CodeSandBox复制链接）

我在 Nuxt 3 应用程序中使用 HeadlessUI/Vue 组件来构建对话框/模态框。我正在使用最新版本“@headlessui/vue”：“^1.7.22”并在 Chrome 中开发...

如何使用 Nuxt 3 创建动态导航结构？

我正在尝试在 Nuxt 3 中动态创建类似的东西： 让路径= [ { 标签：'第1页'， 至：'/Page1' }, { 标签：'第2页'， 至：'/Page2'， 孩子们： [ {