nuxt.js 相关问题

Nuxt：useFetch 调用给出错误的返回类型

我想这个问题的答案可能很简单，但我不知道该怎么做。 我的pages/auth/login.vue中有以下代码： 异步登录() { 尝试 { const { 数据 } = 等待

nuxt3 .nojekyll 无法在 Github 页面上运行

当我想将 nuxt 项目部署到 github 页面时遇到一些麻烦。 我已经在public文件夹下添加了.nojekyll文件，但是运行generate后，带“_”的文件仍然是...

导致错误的原因是找不到名称“useSupabaseClient”。当使用 Nuxt 3 和 Supabase 时？

使用 npm 我已经安装了 Nuxt 3 和 Supabase，但在 vs code 中我不断收到以下错误； 找不到名称“useSupabaseClient”。 当我运行 npm run dev 时，我收到以下错误消息...

为什么useAsyncData不能在Nuxt3中的SSR上工作

我从 Nuxt2 迁移到 Nuxt3，并且在 SSR API 调用方面遇到了困难。 我想在SSR上执行API调用，但API是在客户端调用的并且在网络中可见。 在 Nuxt2 上，当我们...

如何使用 .htaccess 在具有相同域的一台服务器上混合节点和 PHP 应用程序？

我有一个使用 OpenCart 的 PHP 应用程序，但我想将某些页面作为 Nuxt 应用程序提供服务。我想将 Nuxt 应用程序保留在单独的目录中，但仅为某些 URL 提供服务，并让 OpenCart

Milvus 2 Node.js SDK 错误：“TypeError：类扩展值未定义不是构造函数或 null”

注意：在您投反对票之前，请阅读整个问题，因为我检查了循环依赖，但没有发现任何循环依赖。 我正在开发我的 Nuxt.js 应用程序。数据库我选择了Milvus。我想做一个

@vue/compiler-sfc 无法编译 <script setup>

我尝试使用@vue/compiler-sfc来编译.vue文件，我确实成功了，但前提是代码放在标签中，当我编译<script setup>中的代码时，结果将是... </desc> <question vote="2"> <p>我尝试使用<pre><code>@vue/compiler-sfc</code></pre>来编译<pre><code>.vue</code></pre>文件，我确实成功了，但前提是代码放在<pre><code>&lt;script&gt;</code></pre>标签中，当我编译<pre><code>&lt;script setup&gt;</code></pre>中的代码时，结果会出错。以下是我的 <pre><code>compiler.js</code></pre> 文件。在 CMD 中执行 <pre><code>node compiler.js</code></pre> 将编译并转换 <pre><code>.vue</code></pre> 文件为 <pre><code>.js</code></pre> 文件 :</p> <pre><code>// compiler.js import n_fs from &#39;fs&#39;; import n_url from &#39;url&#39;; import n_path from &#39;path&#39;; const __filename = n_url.fileURLToPath(import.meta.url); const __dirname = n_path.dirname(__filename); import * as m_compiler from &#39;@vue/compiler-sfc&#39;; let filePath = n_path.resolve(__dirname, &#39;./Counter.vue&#39;); let fileContent = n_fs.readFileSync(filePath, &#39;utf8&#39;); let fileName = n_path.parse(filePath).name; function transformVueSFC(source, filename){ let {descriptor, errors, } = m_compiler.parse(source, {filename:filename, }); if(errors.length !== 0){ throw new Error(errors.toString()) }; let id = Math.random().toString(36).slice(2, 12); let hasScoped = descriptor.styles.some(function(e){ return e.scoped }); let scopeId = hasScoped ? `data-v-${id}` : undefined; let templateOptions = { sourceMap : false, filename : descriptor.filename + &#39;.vue&#39;, id : id, scoped : hasScoped, slotted : descriptor.slotted, source : descriptor.template.content, compilerOptions : { scopeId : hasScoped ? scopeId : undefined, mode : &#39;module&#39;, }, }; let script = m_compiler.compileScript(descriptor, {id, templateOptions, }); let template = m_compiler.compileTemplate({...templateOptions, }); let renderString = &#39;&#39;; let startString = script.content.includes( &#39;const __default__ = {&#39;) ? &#39;const __default__ = {&#39; : &#39;export default {&#39;; renderString = template.code.match(/export function render\(_ctx, _cache\) {([\s\S]+)/)[0]; renderString = renderString.replace(&#39;export function render(_ctx, _cache)&#39;, &#39;render(_ctx, _cache)&#39;); template.code = template.code.replace(/export function render\(_ctx, _cache\) {([\s\S]+)/, &#39;&#39;); script.content = script.content.replace(startString, function(){ return ( startString + &#34;\n&#34;+ renderString +&#34;,\n&#34; + &#34;__scopeId : &#39;&#34; + scopeId + &#34;&#39;,\n&#34; + &#34;__file : &#39;&#34; + fileName + &#34;&#39;,\n&#34; ); }); let insertStyles = &#39;&#39;; if(descriptor.styles){ let styled = descriptor.styles.map(function(style){ return m_compiler.compileStyle({id, source:style.content, scoped:style.scoped, preprocessLang:style.lang, }); }); if(styled.length){ let cssCode = styled.map(function(s){ return `${s.code}` }).join(&#39;\n&#39;); insertStyles = ( &#34;(function(){\n&#34; + &#34;let styleTag = document.createElement(&#39;style&#39;);\n&#34; + &#34;styleTag.setAttribute(&#39;data-v-&#34;+ filename +&#34;&#39;, &#39;&#39;);\n&#34; + &#34;styleTag.innerHTML = `&#34;+ cssCode +&#34;`;\n&#34; + &#34;document.head.appendChild(styleTag);\n&#34; + &#39;})();&#39; ); }; }; let jsFile01 = __dirname + &#39;/&#39;+ fileName + &#39;.js&#39;; let jsFile01Content = (insertStyles +&#39;\n\n\n\n&#39;+ template.code +&#39;\n\n\n\n&#39;+ script.content); jsFile01Content = jsFile01Content.replace(/\n{4,}/g, &#39;\n\n\n\n&#39;).trim(); n_fs.writeFile(jsFile01, jsFile01Content, {flag:&#39;w&#39;, }, function(error){ if(error){ return console.error(error) }; console.log(&#39;✔ : &#39;+ jsFile01); }); }; transformVueSFC(fileContent, fileName); </code></pre> <p>以下是我的<pre><code>Counter.vue</code></pre>文件，与<pre><code>compiler.vue</code></pre>文件在同一目录下。如果按照传统方式编写，编译结果可以顺利运行，<pre><code>counter.js</code></pre>文件可以在浏览器中执行，但是如果是<pre><code>&lt;script setup&gt;</code></pre>，浏览器会报错：</p> <pre><code>&lt;!-- Counter.vue --&gt; &lt;template&gt; &lt;button type=&#34;button&#34; @click=&#34;count++&#34;&gt;{{ count }}&lt;/button&gt; &lt;/template&gt; &lt;script setup&gt; import { ref } from &#39;vue&#39;; const count = ref(0); &lt;/script&gt; </code></pre> <p>这是<pre><code>Counter.js</code></pre>的编译结果：</p> <pre><code>// Counterjs import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from &#34;vue&#34; import { ref } from &#39;vue&#39;; export default { render(_ctx, _cache) { return (_openBlock(), _createElementBlock(&#34;button&#34;, { type: &#34;button&#34;, onClick: _cache[0] || (_cache[0] = $event =&gt; (_ctx.count++)) }, _toDisplayString(_ctx.count), 1 /* TEXT */)) }, __scopeId : &#39;undefined&#39;, __file : &#39;Counter&#39;, setup(__props, { expose: __expose }) { __expose(); const count = ref(0); const __returned__ = { count, ref } Object.defineProperty(__returned__, &#39;__isScriptSetup&#39;, { enumerable: false, value: true }) return __returned__ } } </code></pre> <p>这是我在html中使用的编译后的<pre><code>Counter.js</code></pre>文件，DevTool会报错，显示<pre><code>vue.esm-browser.js:1513 [Vue warn]: Property &#34;count&#34; was accessed during render but is not defined on instance.</code></pre>和<pre><code>vue.esm-browser.js:1513 [Vue warn]: Cannot mutate &lt;script setup&gt; binding &#34;count&#34; from Options API.</code></pre>：</p> <pre><code>&lt;!-- html use Counter.js --&gt; &lt;script async src=&#34;https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="5134227c3c3e35243d347c2239383c2211607f677f62">[email protected]</a>/dist/es-module-shims.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;importmap&#34;&gt;{ &#34;imports&#34;:{ &#34;vue&#34;:&#34;https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="bec8cbdbfe8d908d908a">[email protected]</a>/dist/vue.esm-browser.js&#34; } }&lt;/script&gt; &lt;div id=&#34;app01&#34;&gt; &lt;Counter&gt;&lt;/Counter&gt; &lt;/div&gt; &lt;script type=&#34;module&#34;&gt; import * as Vue from &#39;vue&#39;; import Counter from &#39;./Counter.js&#39;; let vc01 = Vue.createApp({ components : { &#39;Counter&#39; : Counter, }, }); let vi01 = vc01.mount(&#39;#app01&#39;); &lt;/script&gt; </code></pre> <p>我已经在这个编译问题上挣扎了很长时间，试图自己解决它，但惨败，我真的希望有人能帮助我，谢谢。 😁😁😁</p> <hr/> <p>后来参考了Vue的官方demo，发现在相同的文件内容下，编译出来的结果和我的很像，只不过它的<pre><code>render</code></pre>函数多了<pre><code>$props, $setup, $data, $options</code></pre>这四个参数，而且它没有使用<pre> <code>_ctx.count</code></pre>，但是使用<pre><code>$setup.count</code></pre>，我修改后代码可以运行，修改后的<pre><code>Counter.js</code></pre>如下，但不知道为什么编译会有这两种不同的结果。</p> <pre><code>// Counter.js import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from &#34;vue&#34; import { ref } from &#39;vue&#39;; export default { render(_ctx, _cache, $props, $setup, $data, $options) { return (_openBlock(), _createElementBlock(&#34;button&#34;, { type: &#34;button&#34;, onClick: _cache[0] || (_cache[0] = $event =&gt; ($setup.count++)) }, _toDisplayString($setup.count), 1 /* TEXT */)) }, __scopeId : &#39;undefined&#39;, __file : &#39;Counter&#39;, setup(__props, { expose: __expose }) { __expose(); const count = ref(0); const __returned__ = { count, ref } Object.defineProperty(__returned__, &#39;__isScriptSetup&#39;, { enumerable: false, value: true }) return __returned__ } } </code></pre> </question> <answer tick="false" vote="0"> <p>这个问题你解决了吗？我也面临同样的问题，不知道如何使用设置糖渲染 vue 组件，</p> </answer> </body></html>

使用 run dev 时找不到模块“pinia/dist/pinia.mjs”

我在新的 Nuxt3 应用程序之上设置 Pinia 并启动开发服务器，按顺序使用以下命令： npx nuxi 初始化 nuxt-app cd nuxt 应用程序 npm 安装 npm 安装@pinia/nuxt npm 运行开发 开发服务器运行

如何在 Nuxt 中完全加载页面之前填充元标记？ 和 <Meta>）。然而，似乎当从 Firestore 检索文章数据时，页面已加载，元标记暂时为空。虽然是临时的，但由于请求被视为完成，所以在Postman上测试时meta标签被认为是空的。 SSR 设置为 true。如果可能的话，我更喜欢使用选项 API。</p> <p>是否有一种解决方案允许在页面加载之前使用从 Firestore 获取的数据填充元标记？</p> <p>我尝试使用 SSR 设置并将 <pre><code>beforeMount()</code></pre> 中的代码移动到 <pre><code>created()</code></pre> 和 <pre><code>mounted()</code></pre> ，但没有运气。我是 Nuxt 的新手，如果你能帮助我那就太好了。</p> <p>/pages/app/[id].vue</p> <pre><code> <script> export default { name: "AppPage", data() { return { title: "", catchphrase: "", images: [], description: "", owner: "", url: "", isOwner: false, }; }, async beforeMount() { const auth = getAuth(); const id = this.$route.params.id; const docRef = await doc(this.$db, "apps", id); getDoc(docRef).then(async (doc) => { if (doc.exists()) { const data = doc.data(); this.title = data.title; this.catchphrase = data.catchphrase; this.images = data.images; this.description = data.description; this.owner = await (await getDoc(data.owner)).data(); this.url = data.url; auth.onAuthStateChanged((user) => { if (user) { if (user.uid === this.owner.id) { this.isOwner = true; } } }); } else { console.log("No such document!"); } }); } } </script> <template> <Head> <Title>{{ title }}</Title> <Meta name="description" :content="catchphrase"/> <Meta property="og:title" :content="title"/> <Meta property="og:description" :content="catchphrase"/> <Meta property="og:image" :content="images[0]"/> <Meta property="og:url" :content="url"/> <Meta property="og:type" content="website"/> <Meta property="og:site_name" content="Circle4Devs"/> <Meta name="twitter:card" content="summary_large_image"/> <Meta name="twitter:site" content="@Circle4Devs"/> <Meta name="twitter:title" :content="title"/> <Meta name="twitter:description" :content="catchphrase"/> <Meta name="twitter:image" :content="images[0]"/> </Head> <div id="article"> ... </div> </code></pre> <p>这是邮递员的回复。元标签为空</p> <p><img src="https://cdn.txt58.com/i/AWkuaW1ndXIuY29tL211Zng1UEkucG5n" alt="image"/></p> <p>这是页面加载后浏览器给出的响应。这里的元标签已填充。</p> <p><img src="https://cdn.txt58.com/i/AWkuaW1ndXIuY29tL2xjamVUaW0ucG5n" alt="image"/></p> </question> <answer tick="false" vote="0"> <p>您可以使用 <pre><code>useHead</code></pre> 可组合项</p> <pre><code>useHead({ title: "My page with ads", // or, instead: // titleTemplate: (title) => `My App - ${title}`, viewport: "width=device-width, initial-scale=1, maximum-scale=1", charset: "utf-8", meta: [{ name: "description", content: "My amazing site." }] }) </code></pre> <p>您也可以使用 <pre><code>useSeoMeta</code></pre> 可组合项：</p> <pre><code>useSeoMeta({ description: 'My about page', ogDescription: 'Still about my about page', ogTitle: 'About', ogImage: '<>', twitterCard: 'summary_large_image', }) </code></pre> <p>甚至，出于性能原因，<pre><code>useServerSeoMeta</code></pre>：</p> <pre><code>useServerSeoMeta({ robots: 'index, follow' }) </code></pre> <p>您应该将它们放在您的 <pre><code><script></code></pre> 标签内，并且不需要导入任何内容。</p> <p>来源：</p> <p><a href="https://nuxt.com/docs/api/composables/use-head" rel="nofollow noreferrer">https://nuxt.com/docs/api/composables/use-head</a></p> <p><a href="https://nuxt.com/docs/api/composables/use-seo-meta" rel="nofollow noreferrer">https://nuxt.com/docs/api/composables/use-seo-meta</a></p> <p><a href="https://nuxt.com/docs/api/composables/use-server-seo-meta" rel="nofollow noreferrer">https://nuxt.com/docs/api/composables/use-server-seo-meta</a></p> </answer> </body></html>

我有一个 Nuxt3 应用程序，其中使用作为路径变量传递的 ID 从 Firestore 加载博客文章。为了使我的网站对 SEO 更友好，我想填充 Nuxt 标题和元标记...

NuxtLink 的子级渲染两次（水合错误？）

我的直觉是，存在一些水合不匹配，其中 FontAwesomeIcon 未在服务器上渲染（仅跨度），然后在客户端上渲染 NuxtLink 的两个子节点（...

Vuetify 使用 nuxt i18n 规则消息翻译

我想在 Vuetify 验证失败时显示翻译后的规则消息 模板部分 我想在 Vuetify 验证失败时显示翻译后的规则消息 模板部分 <v-text-field v-model="message.name" outlined :label="$t('page.contact.form.name')" :rules=nameValidationRules ></v-text-field> 脚本部分 const nameValidationRules = ref([requiredRule, blankValidator]) 验证器规则保存在“validationRules.ts”中 export const requiredRule = (value: any): string | boolean => !!value || 'This field is required'; export const blankValidator = (value: string | null | undefined): string | boolean => !value || !!value?.trim() || 'This field cannot be blank.'; 我想用 i18n 变量替换“此字段是必填字段”。 您可以将翻译功能传递给规则定义： const {t} = useI18n() const nameValidationRules = ref([requiredRule(t), blankValidator(t)]) export const requiredRule = (t: any) => (value: any): string | boolean => !!value || t('required'); export const blankValidator = (t: any) => (value: string | null | undefined): string | boolean => !value || !!value?.trim() || t('not_blank');

如何将Element plus与Nuxt 3集成？

我正在尝试使用Nuxt 3安装element plus。我尝试了element plus的官方文档，Element plus docs。我安装了 unplugin-vue-components unplugin-auto-import 并添加了特定...

如何在访问页面时从头开始显示v-overlay元素

我目前正在使用 Nuxt v3.9.3 和 vuetify 3.5.1 构建一个应用程序。 我有一个基于下面的“ablosute”链接的实现，它在按下按钮时显示覆盖......

如何检查nuxt.js中是否调用了navigateTo

我正在开发一个 Nuxt.js 项目并使用 Vitest 进行单元测试。我需要验证在我的测试中是否使用特定路径调用 Nuxt.js 中的 navigatorTo 函数。 这是我的相关部分

Nuxt 3 和 Vue 3 onMounted 调用函数 useFetch 函数未从 API 获取数据

嗨，我是 Nuxt 和 Vue 的新手。我正在使用 Nuxt 框架从 API 获取数据。我想在 onMounted 方法调用时从 API 获取数据。 我创建了 saprate 函数来调用 api。该 api 通过

Vue Bootstrap b表延迟加载数据

所以，以最简单的方式，我使用 Vue Bootstrap 作为我的项目的框架。 我需要向我的项目添加一个自定义表格，其中的数据可以包含数千个单元格（100+ 列和 1k+ 行）。 我...

Nuxt 3静态生成（nuxt生成）不处理~/server/api路由

我正在开发一个 Nuxt 3 应用程序，主要是静态内容，但我有一个与 Pipedrive CRM 交互的表单提交。在开发中（npx nuxi dev），一切都很完美。该...

VSCode 自动导入不起作用：找不到名称

我刚刚将 Nuxt 3.1 升级到 3.2... 如何使其正常工作？ （启动服务器即可成功）

Nuxt3 使用 Typescript 给出无法找到模块“#imports”或其相应的类型声明

我到处搜索为什么会发生这种情况，但没有结果。 在一个非常基本的组件中，这样做会给出：找不到模块“#imports”或其相应的类型声明 导入 {

将 Nuxt3 实用函数导入 Netlify Edge Function

如何将实用程序函数从 utils 目录导入到 Nuxt3 中的边缘函数中？ 如果我在 /utils/sum.js 中有一个函数 sum 导出 const sum = (...nums) => nums.reduce((prev, current) =...