Nuxt.js是一个用于创建Vue.js应用程序的框架，您可以选择Universal，Static Generated或Single Page应用程序（受Next.js启发）
由于 TS，我在尝试访问端点响应中的对象时遇到问题。基本上问题是我需要评估response.data.data即使response.data.success是假的，...
我已将 .hosts 文件设置为： 127.0.0.1 本地.mydomain.dk 然后在我的 nuxt 配置文件中设置： 服务器： { 端口: 3000, // 默认: 3000 主机：'local.mydomain.dk' //默认值：localhost },...
请帮助我，我想知道为什么它不起作用或者我是否做错了。 我 npm i mathlive 来获取输入。并且遵循文档中 nuxt 插件的实现不起作用。 ...
这与我关于 Nuxt 3 API 安全性的其他问题有关。如何添加 CORS？目前，使用头盔模块对我来说不起作用。 这是我上一个问题中的链接 Nuxt 3 Pr...
如何将 beoreRouteEnter 与组合 api 一起使用
我正在创建一个页面，其中存在来自文件的条件，如果条件为真，则用户应该导航到该页面，否则应该显示 error404 页面。 之前恩...</desc> <question vote="0"> <p>我正在创建一个页面，其中存在来自文件的条件，如果条件为真，则用户应该访问该页面，否则应该显示 error404 页面。</p> <pre><code><script setup> beforeEnter: (to, from, next) => { if (condition) { next({ name: "Error404Page", params: { pathMatch: "/some-path" }, }); } else { next(); } }; </script </code></pre> </question> <answer tick="false" vote="0"> <p>如果您使用 Nuxt 3，实现此行为的最佳选择是创建一个 <a href="https://nuxt.com/docs/guide/directory-structure/middleware" rel="nofollow noreferrer">middleware</a> 文件并将其绑定到页面。</p> <ol> <li>使用以下内容定义文件<pre><code>/middleware/check.js</code></pre>：</li> </ol> <pre><code>export default defineNuxtRouteMiddleware((to, from) => { if (/*condition*/) { return navigateTo('/some-path-to-error-page'); } // else do nothing and just let Nuxt navigate to your page } </code></pre> <ol start="2"> <li>在页面组件（例如 <pre><code>/pages/my-page.vue</code></pre>）的 <pre><code><script setup></code></pre> 部分添加：</li> </ol> <pre><code>definePageMeta({ middleware: 'check' }) </code></pre> <p>每次访问 <pre><code>check.js</code></pre> 时都会运行 <pre><code>/my-page</code></pre>，并且如果满足条件，将自动重定向。</p> <p>您还可以通过将文件名更改为<pre><code>/middleware/check.global.js</code></pre>来定义“全局”中间件文件 - 这样的文件将在每个路由事件之前自动运行（按字母顺序排列，以防有更多全局中间件），无需任何额外的配置。</p> </answer> </body></html>
Vue/Nuxt 3 仅使用命名 v-models 时出现类型错误
我有一个 Vue、Nuxt 3 Typescript 项目。 在我的自定义组件中，我将两个值与命名的 v-model 绑定。它有效，但在父组件中我看到类型错误。 当我使用
Vue.js 具有深层属性的双向数据绑定：子组件中的观察者双重触发并在第一次单击时恢复
我在 Vue.js 应用程序中遇到一个不寻常的问题，涉及对象上的双向数据绑定。 在我的设置中，父组件将一个对象作为 prop 传递给子组件。孩子组成...
通过引用包含该组件的布局中的 div 来在组件中 getBoundingClientRect （这里我使用 vueuse）的正确方法是什么？我尝试过各种配置...
我正在使用 vue-meta: ^2.4.0 来填充我的 Nuxt 站点的 。除了添加非标准 HTML 元素之外，一切都按预期工作。在这种情况下，我想要 我正在使用 vue-meta: ^2.4.0 填充我的 Nuxt 网站的 <head>。除了添加非标准 HTML 元素之外，一切都按预期工作。在这种情况下，我希望 <nonstandard href="${process.env.SOME_VALUE_FROM_ENV}"> 位于 <head> 中，但它永远不会出现，即使我用一个简单的值对其进行硬编码。不支持非标准元素吗？ 我的nuxt.config.js如下： module.exports = { head: { // works htmlAttrs: { lang: 'en' }, // works link: [ { rel: 'shortcut icon', href: '/images/favicon.ico', type: 'image/ico' } ], // works meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1.0' }, { 'http-equiv': 'X-UA-Compatible', content: 'IE=Edge' } ], // NONE OF THESE APPROACHES WORK nonstandard: [ { href: '${process.env.SOME_VALUE_FROM_ENV}' }, { innerHTML: `href="${process.env.SOME_VALUE_FROM_ENV}"` } ], innerHTML: `<nonstandard href="${process.env.SOME_VALUE_FROM_ENV}" />`, // works script: [ { innerHTML: ` (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','xxxxxxxxxxx'); ` } ], // works noscript: [ { innerHTML: ` <iframe src="https://www.googletagmanager.com/ns.html?id=xxxxxxxxxxx" height="0" width="0" style="display:none;visibility:hidden"></iframe> `, pbody: true } ], __dangerouslyDisableSanitizers: ['script', 'noscript', 'nonstandard'], } } 按照 @DengSihan 的建议，我能够通过自定义 app.html 填充该值，该值是我作为 nuxt.config.js 文件的同级文件创建的。 <!DOCTYPE html> <html {{ HTML_ATTRS }}> <head {{ HEAD_ATTRS }}> {{ HEAD }} <nonstandard href="{{ ENV.SOME_VALUE_FROM_ENV }}"> </head> <body {{ BODY_ATTRS }}> {{ APP }} </body> </html> 在我的nuxt.config.js： module.exports = { env: { SOME_VALUE_FROM_ENV: process.env.SOME_VALUE_FROM_ENV } } 由此我们可以得出结论，vue-meta无法用非标准元素填充头部，必须使用自定义的app.html来代替。不知道为什么这个问题被否决了。这是一个独特的案例。
我将 NuxtJS 与 Nuxt3 一起使用，在我的组件中，我想使用动态 opengraph 元数据更新页面的头部。在我的组件中，我正在显示一个画廊，为此我正在获取数据......
我正在开发一个 Nuxt 3 项目，我对我的一个文件中的语法有疑问。 （我想让它更加SEO友好，所以我不使用pages/posts/[id].vue，而是使用pages/posts/[id]/[
Nuxt 2 允许我们将所有 CSS 提取到外部文件中： https://v2.nuxt.com/docs/configuration-glossary/configuration-build/#extractcss 但是，我想排除一些组件
Dockerized nginx 和 vue+nuxt 无法连接到前端服务器 111：连接被拒绝
当尝试在浏览器中访问本地主机时，我收到 502 bad gateway 在 docker 容器中记录以下错误： 连接到上游时失败（111：连接被拒绝），客户端：172.26....
Nuxt：如何自定义 prisma 错误并将此自定义与 useFetch 一起使用？
我的目的是在后端使用prisma并在前端使用nuxt在mysql数据库中创建一个人。 目前前端如下 类型模式 = z.output 我的目的是在后端使用 prisma 并在前端使用 nuxt useFetch 在 mysql 数据库中创建一个人。 目前前端如下 type Schema = z.output<typeof schema>; type person = { firstName: string; lastName: string; email: string; phone: string; memberSince: string; memberLastYear: string; }; const state: person = reactive({ firstName: "", lastName: "", email: "", phone: "", memberSince: "", memberLastYear: "", }); async function onSubmit(event: FormSubmitEvent<any>) { console.log("submit"); const { data, pending, error } = await useFetch("api/person", { method: "POST", body: event.data, }); if (data) { console.log("logging data"); console.log(toRaw(data.value)); personsStore.addPerson(toRaw(data.value)); } if (error) { console.log("logging error"); console.log(error.value); } emit("close"); } 代码位于前端模态中，其中包含表单，因此带有最终的emit('close')语句的onSubmit函数。 在 prima 模式中，有一个唯一的约束来防止用户创建 2 个具有相同名字和姓氏的人。 model Person { id Int @id @default(autoincrement()) firstName String @db.VarChar(70) lastName String @db.VarChar(70) email String @db.VarChar(255) phone String @db.VarChar (20) memberSince DateTime @db.Date memberLastYear String @db.VarChar(10) @@unique([firstName,lastName], name:"fullName") } 目前我终点的代码是这样的 import { PrismaClient, Prisma } from "@prisma/client"; const prisma = new PrismaClient(); export default defineEventHandler(async (event) => { const body = await readBody(event); console.log("in backend create person"); let memberSince = new Date(body.memberSince); try{ const person = await prisma.person.create({ data: { firstName: body.firstName, lastName: body.lastName, email: body.email, phone: body.phone, memberSince: memberSince, memberLastYear: body.memberLastYear, }, }); return person } catch(e){ throw new Error('something went wrong when creating the person in the database') } }); 我打算研究 catch 部分，以便在用户尝试创建重复对（名字姓氏）时抛出自定义消息 我尝试了很多事情但从未成功。我需要一些帮助来在这里编写 catch 子句，还需要一些帮助来了解如何在前端检索此消息。 目前我什至无法收到自定义消息，即“在数据库中创建人员时出现问题”，但只能收到原始错误消息“错误：[POST]“api/person”：500内部服务器错误” 提前致谢。 经过一段时间的斗争，我找到了这个解决方案（可能不是最好的或最正统的，但它有效） import { PrismaClient, Prisma } from "@prisma/client"; const prisma = new PrismaClient(); export default defineEventHandler(async (event) => { const body = await readBody(event); console.log("in backend create person"); let memberSince = new Date(body.memberSince); let person = null; await prisma.person .create({ data: { firstName: body.firstName, lastName: body.lastName, email: body.email, phone: body.phone, memberSince: memberSince, memberLastYear: body.memberLastYear, }, }) .then((response) => { person = response; }) .catch((error) => { if (error instanceof Prisma.PrismaClientKnownRequestError) { // The .code property can be accessed in a type-safe manner if (error.code === "P2002") { error = createError({ statusCode: 500, statusMessage: "Duplicate fullName not accepted", }); } } throw error; }); return person; });
Nuxt 3 useFetch 使用 Typescript 时可能出现 null 错误
我在 Vue 页面上使用 Typescript 并尝试从 API 获取用户数据。 const { 数据：用户 } = 等待 useFetch('/api/user/info', { 标题：</desc> <question vote="0"> <p>我在 Vue 页面上使用 Typescript 并尝试从 API 获取用户数据。</p> <pre><code><script setup lang="ts"> const { data: user } = await useFetch('/api/user/info', { headers: useRequestHeaders(['cookie']) }); if (!user.value) throw createError('Problems when fetching current user!'); const myComputed = computed(() => !user.value.login); // <-- Error! </script> </code></pre> <p>但是我遇到了很多错误！ 当我尝试在 <pre><code>user.value</code></pre> 中使用 <pre><code>script</code></pre> 时，我收到 <pre><code>user.value possibly null</code></pre> 错误，而在 <pre><code>template</code></pre> 内部，我收到 <pre><code>__VLS_ctx.user possibly null</code></pre> 错误。</p> <p>当我从 <pre><code>lang="ts"</code></pre> 中删除 <pre><code>script</code></pre> 属性时，错误消失，但我不想这样做。如何解决这个问题？</p> </question> <answer tick="false" vote="0"> <p>检查该值是否为空，可能会解决问题吗？</p> <pre><code><script setup lang="ts"> const { data: user } = await useFetch('/api/user/info', { headers: useRequestHeaders(['cookie']) }); if (!(user && user.value)) throw createError('Problems when fetching current user!'); const myComputed = computed(() => !(user && user.value && user.value.login)); // <-- Error! </script> </code></pre> <p>您还可以使用非空断言运算符！</p> <pre><code><script setup lang="ts"> const { data: user } = await useFetch('/api/user/info', { headers: useRequestHeaders(['cookie']) }); if (!user!.value) throw createError('Problems when fetching current user!'); const myComputed = computed(() => !user!.value!.login); // <-- Error! </script> </code></pre> </answer> </body></html>
我有一个 nuxt 应用程序，它使用 prisma 将记录保存在 mysql 数据库中。 在我的棱镜模式中 memberSince DateTime @db.Date 匹配 mysql 中 DATETIME 类型的列 在 fr...
静态生成的 Nuxt 2 站点和 Netlify 无服务器功能的 CORS 问题
我在尝试从 Netlify 上托管的静态生成的 Nuxt.js 站点向处理 Mailchim 的无服务器函数发出请求时遇到 CORS（跨源资源共享）问题...
Nuxt - 道具错误：“instanceof”的右侧不可调用
我遇到了这个错误： 类型错误：“instanceof”的右侧不可调用 在这一行中： 导出默认值{ 道具： { 项目： { 类型：{数组，</desc> <question vote="0"> <p>我遇到了这个错误：</p> <pre><code>TypeError: Right-hand side of 'instanceof' is not callable </code></pre> <p>在这一行中：</p> <pre><code><script> export default { props: { items: { type: {Array, Object}, default: [], }, } } </script> </code></pre> <p>错误在<pre><code>type: {Array, Object}</code></pre> 我能做什么？？</p> </question> <answer tick="false" vote="1"> <p>如果有多种类型，则 prop 类型应该是数组，默认值应该是返回数组的函数：</p> <pre><code> export default { props: { items: { type: [Array, Object], default:()=> [], }, } } </code></pre> </answer> </body></html>
当尝试在 Nuxt3 Pinia 商店中使用 i18n 消息时，我收到错误消息： “语法错误：必须在设置函数的顶部调用” 当在模板中使用消息时，我可以做...
如何在 nuxtui 中使用 zod 验证输入的同时转换输入？
我在 Nuxt 项目中有这个表单 改变一个人 我在 Nuxt 项目中有这个表单 <template> <UCard> <template #header> <h3 class="font-semibold text-xl">Ajouter une personne</h3> </template> <UForm :schema="schema" :state="state" class="space-y-2" @submit="onSubmit" > <UFormGroup class="" label="Prénom" name="firstName"> <UInput v-model="state.firstName" /> </UFormGroup> <UFormGroup class="" label="Nom" name="lastName"> <UInput v-model="state.lastName" /> </UFormGroup> <UFormGroup class="" label="Email" name="email"> <UInput v-model="state.email" /> </UFormGroup> <UFormGroup class="" label="Téléphone" name="phone"> <UInput v-model="state.phone" /> </UFormGroup> <UFormGroup class="" label="Membre depuis" name="memberSince"> <UInput v-model="state.memberSince" type="date" /> </UFormGroup> <UFormGroup class="" label="Membre l'an dernier?" name="memberLastYear"> <USelect v-model="state.memberLastYear" :options="mlyOptions" /> </UFormGroup> <UButton type="submit"> Enregistrer cette personne </UButton> </UForm> <template #footer> <Placeholder class="h-8" /> </template> </UCard> </template> <script setup lang="ts"> import type { FormError, FormSubmitEvent } from "#ui/types"; import { z } from 'zod' const mlyOptions= ['Oui','Non'] const schema = z.object({ firstName:z.string().regex(/^[ÈÉÊA-Z][a-zïèéê']*([\-\s]{1}[ÈÉÊA-Z]{1}[a-zïèéê]*)*$/, "Capitale en début de chaque prénom. Pas de double espace ou tiret. Pas d'espace ou de tiret en début et fin"), lastName:z.string().regex(/^([ÈÉÊA-Z]){1}('[ÈÉÊA-Z]+){0,1}[a-zïèéê']*([\-\s]{1}[ÈÉÊA-Z]{1}[a-z'ïèéê]*)*$/, "Capitale en début de chaque nom. Pas de double espace ou tiret. Pas d'espace ou de tiret en début et fin. l'apostrophe des noms irlandais acceptée."), email: z.string().email("L'adresse électronique est mal formée"), phone:z.string().trim().min(10,"Le numéro de téléphone doit comprendre au moins 10 chiffres"), memberSince: z.coerce.date(), memberLastYear:z.string() }) type Schema = z.output<typeof schema> const state = reactive({ firstName: undefined, lastName:undefined, email: undefined, phone: undefined, memberSince: undefined, memberLastYear: undefined }) async function onSubmit(event: FormSubmitEvent<any>) { // Do something with data console.log("submit"); console.log(toRaw(event.data)); } </script> 我想检查电话号码是否以法语书写，即 xx xx xx xx xx（五对数字，以空格分隔。 为此，我可以编写一个正则表达式并像上面示例中的名字和姓氏一样使用它，并且仅当用户遵守规则时才接受输入。 但是如何对用户更加宽容，只要求他输入至少 10 位数字，而不管有多少个空格以及这些空格在字符串中的位置，然后使用转换来纠正 我试过了 phone:z.string().trim().transform((val,ctx)=>{ if(val.length!==10){ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "You must enter 10 digits", }) return z.NEVER; } var parts=val.match(/.{1,2}/g) return parts.join(' ') ), 这不起作用。单独事件trim()，即 phone:z.string().trim() 什么都不做 trim 只会删除前导和尾随空白（并且不会触及字符串中的空白）。您可以通过检查以下输出来亲自验证这一点： import { z } from "zod"; console.log(z.string().trim().parse(" hi there ")); // Logs "hi there" 请注意，字符串中心的 ' ' 字符仍然保留。要在转换步骤中删除字符串中的所有空格，您可以使用 String.prototype.replaceAll const schema = z.string() .trim() .transform((s, ctx) => { const withoutWhitespace = s.replaceAll(/\s*/g, ''); if (withoutWhitespace.length !== 10) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: "You must enter 10 digits", }) return z.NEVER; } return withoutWhitespace; }); console.log(schema.safeParse("12345678910")); // Logs a failure result // The following parses successfully and strips out the whitespace. console.log(schema.parse(" 0 1 2 3 4 5 6\n\r\t 7 8 9 ")); replaceAll 方法具有相当广泛的浏览器支持，尽管它仍然有些新。您可能需要针对您的具体用例咨询我可以使用这个吗？ （如果您需要支持较旧的浏览器，例如 IE11，应该可以进行 polyfill）。您可能还需要更新 lib 中的 tsconfig 选项以包含对其的支持。