nuxt.js 相关问题

Vue 3 + Pinia 中的业务逻辑

假设我有一个使用 Vue 3 的简单网上商店应用程序。每当用户将商品添加到购物车时，我都会将其存储在 Pinia 本地，并将此事件信息发送到后端。 默认情况下

Laravel Reverb (AWS) 连接到 Nuxt3 (cloudflare)

我有点不知所措。以前我有一个 Laravel/Vue.js 服务器，pusher.js 工作正常。 然后我切换到 Nuxt3 前端，Laravel 11 / reverb 作为后端。自从两个

多个文件组件和 eslint 误报

我们将文件拆分为 component.vue、styles.scss 和 template.html，如下所示： // 公共元素 从 '@/components/Elem... 导入类别</desc> <question vote="0"> <div> </div> <p>我们将文件<a href="https://mokkapps.de/vue-tips/split-your-sfc-into-multiple-files" rel="nofollow noreferrer">分割</a>到component.vue、styles.scss和template.html中，类似于：</p> <pre><code>&lt;script setup lang=&#34;ts&#34;&gt; // Common elements import Category from &#39;@/components/Elements/Category/Category.vue&#39;; // COMPOSABLES const localePath = useLocalePath(); // DATA const session = ref(getSession()); &lt;/script&gt; &lt;template src=&#34;./CustomTable.html&#34; /&gt; &lt;style lang=&#34;scss&#34; src=&#34;./custom-table.scss&#34; /&gt; </code></pre> <p>但即使在 <pre><code>Category</code></pre> 上使用 <pre><code>localePath</code></pre>、<pre><code>session</code></pre> 和 <pre><code>./CustomTable.html</code></pre>，linter 也会带来以下问题：</p> <pre><code>3:8 warning &#39;Category&#39; is defined but never used @typescript-eslint/no-unused-vars 6:7 warning &#39;localePath&#39; is assigned a value but never used @typescript-eslint/no-unused-vars 9:7 warning &#39;session&#39; is assigned a value but never used @typescript-eslint/no-unused-vars </code></pre> <p>我知道我们可以使用<pre><code>eslint-disable</code></pre></p> <pre><code>&lt;script setup lang=&#34;ts&#34;&gt; /* eslint-disable @typescript-eslint/no-unused-vars */ // Common elements import Category from &#39;@/components/Elements/Category/Category.vue&#39;; // COMPOSABLES const localePath = useLocalePath(); // DATA const session = ref(getSession()); /* eslint-enable @typescript-eslint/no-unused-vars */ &lt;/script&gt; &lt;template src=&#34;./CustomTable.html&#34; /&gt; &lt;style lang=&#34;scss&#34; src=&#34;./custom-table.scss&#34; /&gt; </code></pre> <p>但这可能会导致真正未使用的变量被忽略</p> <p>有什么方法可以让 linter 在链接的模板文件中搜索用法吗？否则你建议我们可以做些什么？</p> <p>顺便说一句，这是我们的 eslintrc.ts</p> <pre><code>{ &#34;env&#34;: { &#34;browser&#34;: true, &#34;es2021&#34;: true, &#34;node&#34;: true, &#34;vue/setup-compiler-macros&#34;: true }, &#34;extends&#34;: [ &#34;eslint:recommended&#34;, &#34;plugin:vue/vue3-recommended&#34;, &#34;@nuxtjs/eslint-config-typescript&#34;, &#34;plugin:@typescript-eslint/recommended&#34;, &#34;prettier&#34;, &#34;plugin:storybook/recommended&#34; ], &#34;overrides&#34;: [], &#34;parser&#34;: &#34;vue-eslint-parser&#34;, &#34;parserOptions&#34;: { &#34;parser&#34;: &#34;@typescript-eslint/parser&#34; }, &#34;plugins&#34;: [&#34;vue&#34;, &#34;@typescript-eslint&#34;], &#34;rules&#34;: { &#34;no-debugger&#34;: &#34;off&#34;, &#34;vue/multi-word-component-names&#34;: &#34;off&#34;, &#34;@typescript-eslint/no-explicit-any&#34;: &#34;off&#34;, &#34;vue/no-reserved-component-names&#34;: &#34;off&#34;, &#34;import/no-named-as-default&#34;: &#34;off&#34;, &#34;arrow-body-style&#34;: [&#34;error&#34;, &#34;as-needed&#34;], &#34;padding-line-between-statements&#34;: [&#34;error&#34;, { &#34;blankLine&#34;: &#34;always&#34;, &#34;prev&#34;: &#34;*&#34;, &#34;next&#34;: &#34;if&#34; }] } } </code></pre> <p>-编辑-</p> <p>还可以</p> <pre><code>defineExpose({ Category, localePath, session }) </code></pre> <p>但我不想在无意的时候避免暴露</p> </question> <answer tick="false" vote="0"> <p>ESLint 默认情况下不会读取您的 HTML 文件，因此预计它不会了解这些文件中的变量用法。</p> 几年前，ESLint 添加了一条规则，允许将 JSX 中访问的变量标记为“已使用”，从而删除警告。有一个 API 可以支持此操作 (<p>markVariableAsUsed<a href="https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-uses-vars.md" rel="nofollow noreferrer">)，您可以使用它来为 HTML 文件实现类似的规则。</a> <a href="https://github.com/jsx-eslint/eslint-plugin-react/blob/e4ecbcfc8f83099a9bd5da18f45b5a6e66ebfb4a/lib/rules/jsx-uses-vars.js#L55" rel="nofollow noreferrer">还有一个现有的 lint HTML 文件插件 (</a>es-plugin-html</p>)，它似乎实现了<p>正是这个<a href="https://github.com/BenoitZugmeyer/eslint-plugin-html" rel="nofollow noreferrer">。使用此插件，在 HTML 文件中访问的全局变量将被标记为“已使用”。</a> <a href="https://github.com/BenoitZugmeyer/eslint-plugin-html/blob/d7e747ef0a2d2a1d1c6f6844525b5d6887a16f6a/src/verifyWithSharedScopes.js#L64" rel="nofollow noreferrer">我建议尝试一些支持 linting HTML 的插件。</a> </p>另一种可能的解决方案是在其他地方定义变量并导出它们。<p> </p> <p></p>

AWS Amplify - NUXT 3 部署

我正在尝试使用 SSG 部署 NUXT 3 项目。我遇到了部署问题。 我的 amplify.yml： 版本：1 前端： 阶段： 预构建： 命令： - nvm 使用 18 && 节点 --version ...

使用 Firebase 消息传递与 Nuxt.js 和 Vue.js 无法在 Service Worker 中捕获 FCM“notificationclick”事件

在我的 firebase-messaging-sw.js 中查看除安装、激活或推送之外的任何事件时遇到问题。正在接收并提供通知，但我无法看到

无法使用 Firebase 消息传递与 Nuxt.js 和 Vue.js 捕获 Service Worker 中的“notificationclick”事件

在我的 firebase-messaging-sw.js 中查看除安装、激活或推送之外的任何事件时遇到问题。正在接收并提供通知，但我无法看到

vuetify 3 v-date-picker（type =“month”）在nuxt中不起作用（“vue”：“^3.3.4”，）

“vuetify”：“^3.5.7” "vite-plugin-vuetify": "^2.0.1", "@mdi/font": "^7.4.47", 我想从 ... 中选择并检索 YYYY/MM 格式的数据

Nuxt 3 说“变量”未定义，而我已经在数据中定义了它，我该如何解决这个问题？

所以我有一个 Nuxt 3 项目，但我的默认布局文件有问题。 在我的脚本标签中，我定义了以下内容 导出默认值{ 数据（） { 返回 { 变...

尝试使用右键单击打开页面并选择“在新选项卡中打开链接”时，NuxtLink 缺少基本 url

我使用自定义基本 URL，在本地开发中如下所示：“localhost:3000/MyBaseName/v.3/#”。 以 Nuxt 组件 为例： 我使用自定义基本 URL，在本地开发中如下所示：“localhost:3000/MyBaseName/v.3/#”。 使用Nuxt组件<NuxtLink>例如： <nuxt-link to="/about">About<nuxt-link/> 通常当我点击链接时它会重定向到页面 “localhost:3000/MyBaseName/v.3/#/about”， 如果我尝试使用右键单击打开它并选择“在新选项卡中打开链接”，它将在本地运行，但不能在生产服务器中运行。在生产服务器中似乎显示如下： https://myURL/v.2/#/about（缺少基本网址） 而不是这个： https://myURL/mybasename/v.2/#/about 已更新 我似乎无法找出为什么会发生这种情况，所以我的替代方法是使用 <a href="the-location-of-the-page"> 而不是使用 <NuxtLink to="the-location-of-the-page">

Nuxt 更新后出现“当前运行的 TypeScript 版本不受@typescript-eslint/typescript-estree 官方支持”问题

我刚刚通过 npx nuxi Upgrade 在我的项目中升级了 nuxt ，现在当我运行 eslint 时。我有这个输出 ============= 警告：您当前正在运行一个非官方版本的 TypeScript...

同时发送 POST/GET 请求时出现问题 - Nuxt 3

现在我希望通过发送用户的姓名并接收与该用户相关的所有最后一个项目来从数据库加载用户的最后一个项目。出于某种原因，我总是收到“未捕获（在

使用 Sidebase Nuxt-Auth 和 Keycloak 的 Nuxt 3 应用程序中的访问令牌检索和验证问题

我目前正在开发 Nuxt 3 应用程序，并使用 Sidebase 的 Nuxt-Auth 模块和 Keycloak 作为身份提供者集成了身份验证。身份验证流程按预期工作，...

使用 nuxt 异步加载样式

如何异步加载样式到站点。或者在页脚中插入样式？ 我使用 nuxt：2.0.0 我尝试： 在 webpack 中添加插件：async-stylesheet-webpack-plugin。但是，在 nuxt 中预渲染添加样式。 ...

Nuxt3登录后如何正确存储用户数据

我想在一个人登录后存储用户数据，我还在“/page”页面上使用中间件来查看用户是否登录，如果是，他会跳过，但我已经存储了用户数据。 ..

关于Google Adsense中打开和关闭测试模式的问题

本地测试时，需要开启测试模式，所以需要在脚本中添加 'data-adbreak-test': 'on' 。 但在生产环境中需要删除该属性。 开发人员： 输入

如何禁用 Vuetify v-stepper 操作按钮

我正在尝试禁用 Vuetify V-Stepper 操作，就像在第一步时，上一个按钮将被禁用，下一个按钮在到达最后一步时将被禁用。顺便说一句，我正在使用 Vue...

如何使用 NuxtJs/VueJs 框架添加 Google Ads Manager 广告单元（横幅）？

我有这个广告单元 google_ad_client =“ca-pub-2158343444694791”;/* AD7 */ google_ad_slot = "AD7"; 谷歌广告宽度= 300； </desc> <question vote="0"> <p>我有这个广告单元</p> <pre><code> &lt;script type=&#34;text/javascript&#34;&gt; google_ad_client = &#34;ca-pub-2158343444694791&#34;;/* AD7 */ google_ad_slot = &#34;AD7&#34;; google_ad_width = 300; google_ad_height = 250; &lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;//pagead2.googlesyndication.com/pagead/show_ads.js&#34;&gt;&lt;/script&gt; </code></pre> <p>我想在我的网站主页上放置一个脚本，并在不同的地方显示横幅 5 次。</p> <p>该网站是使用 NodeJs、NuxtJs3 和 VueJs3 开发的，同时具有 SSR 和 SPA。</p> <p>但是，如您所知，我无法将脚本标签放置在 vuejs 模板中。</p> <p>您能指导我如何正确渲染它吗？ 到目前为止，我已尝试以下操作：</p> <p>**模板**</p> <pre><code>&lt;div class=&#34;my_div&#34;&gt;&lt;/div&gt; </code></pre> <p><strong>Javascript</strong></p> <pre><code> nuxt.hook(&#34;page:loading:end&#34;, () =&gt; { loaderLoading.value = false setTimeout(() =&gt; { var div = document.querySelector(&#39;.my_div&#39;); // Create a script element var script = document.createElement(&#39;script&#39;); // Set the type attribute script.type = &#39;text/javascript&#39;; // Set the source (src) attribute script.src = &#39;//pagead2.googlesyndication.com/pagead/show_ads.js&#39;; // Create an inline script element for the ad parameters var inlineScript = document.createElement(&#39;script&#39;); inlineScript.type = &#39;text/javascript&#39;; inlineScript.innerHTML = ` google_ad_client = &#34;ca-pub-2158343444694791&#34;; /* AD7 */ google_ad_slot = &#34;AD7&#34;; google_ad_width = 300; google_ad_height = 250; `; console.log(&#34;test&#34;) // Append the inline script to the div div.appendChild(inlineScript); // Append the script to the div div.appendChild(script); }, 2000); }) </code></pre> <p>问题是我有很多控制台错误，例如：</p> <pre><code>Uncaught TagError: adsbygoogle.push() error: Ad client is missing from the slot. Uncaught TypeError: Cannot read properties of null (reading &#39;appendChild&#39;) Unchecked runtime.lastError: The message port closed before a response was received. </code></pre> <p>请告知广告单元的正确放置位置。是否有支持 Google Ads Manager 广告单元的库？请注意，这与 Google AdSense 不同。</p> <p>问候</p> </question> <answer tick="false" vote="0"> <p>我用了这个库，问题解决了！</p> <p><a href="https://github.com/pchynoweth/google-adsense-module" rel="nofollow noreferrer">https://github.com/pchynoweth/google-adsense-module</a></p> <p>谢谢！</p> </answer> </body></html>

数字和日期的本地化在 Nuxt3 + VueI18n 中不起作用

我尝试按照此处所述配置 Nuxt 3 和 VueI18n 插件。它适用于在模板中使用 $t() 或在脚本部分中使用 t() 的“正常”翻译。我...

如何使用nuxt3和vite高效添加全局css？

我的项目中包含全局 sass，但我找不到将其添加到项目中的有效方法。 似乎有两种流行的方法可以在项目中添加 css。 投票：{ 插件：[svgLoa...

如何在Nuxt.js创建的Capacitor App中请求API

我通过现有的 Nuxt.js 项目创建了 Capacitor 应用程序，并使用通过执行 nuxtgenerate 生成的 dist 文件夹。 当我运行应用程序时，API请求响应下面的html文件 var 异常代码； （功能...