nuxt.js 相关问题

nuxt3 和服务器文件夹的部署问题

我有 nuxt3 的应用程序，它从服务器文件夹中的其他服务器调用 API，然后从 vue 文件调用 API 并使用数据。当使用 npm rungenerate 部署应用程序时，网络选项卡给我...

Vue/Nuxt 中如何从 URL 获取参数？。 这有效： <script setup> const {数据：内容} = ...</desc> <question vote="0"> <p>使用 Nuxt 我有一个页面 <pre><code>pages/works/[author]/[title].vue</code></pre>，后端 API 位于 <pre><code>localhost:8000/api/works/<author>/<title></code></pre>。</p> <p>这有效：</p> <pre><code><script setup> const {data: content} = await useFetch('http://localhost:8000/api/works/SomeAuthor/SomeTitle') </script> </code></pre> <p>如果我尝试让它变得动态</p> <pre><code>const config = useRuntimeConfig(); const route = useRoute(); const url = config.apiUrl + '/api/works/' + route.params.author + '/' + route.params.title; console.log('url is' + url); // Seems ok const {data: content } = await useFetch(url); // Errors </code></pre> <p>它坏了，我得到了 4 行</p> <pre><code>[Vue Router warn]: No match found for location with path "/works/SomeAuthor/undefined/api/works/SomeAuthor/SomeTitle" </code></pre> <p>可能是什么原因造成的？预先感谢您的帮助！</p> </question> <answer tick="false" vote="0"> <p>正如我所见，获取路由参数没有问题，它应该可以正常工作，但错误出在它本身的路径内。 <strong>作品/SomeAuthor/未定义/api/作品/SomeAuthor/SomeTitle</strong></p> <p>你会得到一条重复的路径，它不应该是这样的。 也许是你的文件夹结构有问题？ 如果您可以提供代码，我可以看一下并提供更多帮助。</p> </answer> </body></html>

使用Nuxt我有一个页面pages/works/[author]/[title].vue，后端API位于localhost:8000/api/works//。 这有效： <script setup> const {数据：内容} = ...</desc> <question vote="0"> <p>使用 Nuxt 我有一个页面 <pre><code>pages/works/[author]/[title].vue</code></pre>，后端 API 位于 <pre><code>localhost:8000/api/works/<author>/<title></code></pre>。</p> <p>这有效：</p> <pre><code><script setup> const {data: content} = await useFetch('http://localhost:8000/api/works/SomeAuthor/SomeTitle') </script> </code></pre> <p>如果我尝试让它变得动态</p> <pre><code>const config = useRuntimeConfig(); const route = useRoute(); const url = config.apiUrl + '/api/works/' + route.params.author + '/' + route.params.title; console.log('url is' + url); // Seems ok const {data: content } = await useFetch(url); // Errors </code></pre> <p>它坏了，我得到了 4 行</p> <pre><code>[Vue Router warn]: No match found for location with path "/works/SomeAuthor/undefined/api/works/SomeAuthor/SomeTitle" </code></pre> <p>可能是什么原因造成的？预先感谢您的帮助！</p> </question> <answer tick="false" vote="0"> <p>正如我所见，获取路由参数没有问题，它应该可以正常工作，但错误出在它本身的路径内。 <strong>作品/SomeAuthor/未定义/api/作品/SomeAuthor/SomeTitle</strong></p> <p>你会得到一条重复的路径，它不应该是这样的。 也许是你的文件夹结构有问题？ 如果您可以提供代码，我可以看一下并提供更多帮助。</p> </answer> </body></html>

是否可以在 Nuxt 2 项目中同时运行 Javascript 和 TypeScript？

我有一个 100% Javascript 的 Nuxt 2.17.2 项目，我需要运行一些 100% TypeScript 的 SDK。 我希望能够配置我的项目，以便我可以运行 TypeScript 和 Javascript，所以...

date-fns 不适用于无服务器边缘功能？

在我的 Nuxt 3 项目中，当我使用 date-fns 时，它工作正常（部署在 Vercel 上）： 服务器/api/datefns.ts 从“date-fns”导入 { subDays } 导出默认的defineEventHandler((event) =&...

Nuxt 3 - 带有 Vue Toast 通知的客户端插件

我在使用 Nuxt 3 客户端插件时遇到了一些问题。 Nuxt 3 插件文档是这样说的： Nuxt会自动读取你的插件目录中的文件并加载它们。您可以使用 .server 或 .

将 locale.json 消息映射到 javascript 中的对象

我一直在处理 i18n 和语言环境，在 vue 中，有一个函数 t() 接受一个参数 - 字符串，表示预计在应用程序中显示的字符串的键 //en.json { “……

nuxt/auth 真正安全吗？

假设客户在索引页面上打开您的 nuxt.js 网站。从那里，他们进行身份验证（您为此目的使用了 @nuxtjs/auth-next）。然后他们转移到一个安全页面，该页面仅是真实的......

Nuxt3：Strapi 内容未在生产服务器上更新

我目前正在开发一个前端使用 Nuxt3 的网站 (mbmobilesauna.de)。我的后端是 Strapi CMS。这两个站点在生产和开发中实际上都运行良好。旁注：我只去过...

Nuxt 3 组件首次渲染时如何设置加载器

我正在使用 element plus 库开发 nuxt 3 项目，我的一个页面有 3 个选项卡，我已将 3 个选项卡内容分为 3 个组件，并且我设置了仅渲染第一个选项卡的条件

Nuxt3 和 Vuetify3 - 如果启用了 SSR，则获取 useDisplay() 属性的初始状态

该项目使用Nuxt3和Vuetify3堆栈。 我已经开始研究自适应移动布局。 为了管理不同的布局，我按照官方文档使用 useDisplay() 。 如果禁用 SSR，它可以正常工作。乙...

第一页加载时，“asyncData()”中的属性在“mounted()”中不可用

我们有一个由 Nuxt 2.14 运行的静态生成的网站。 在某些页面组件中，我需要 asyncData() 函数的多个属性才能使应用程序正常工作。 开发中

将editorjs添加到nuxt 3项目

我正在尝试将 editorjs 添加到新的 nuxt 3 项目中。遵循文档。 在 ./pages/write.vue 中，我有： 写作 我正在尝试将 editorjs 添加到新的 nuxt 3 项目中。按照文档。 在./pages/write.vue，我有： <template> <div> writing </div> <div id="editorjs" ></div> </template> <script setup> import EditorJS from '@editorjs/editorjs'; import Header from '@editorjs/header'; import Paragraph from '@editorjs/paragraph'; import List from '@editorjs/list'; const editor = new EditorJS({ holder: 'editorjs', tools: { header: Header, list: List }, }); editor.save().then((outputData) => { console.log('article data : ', outputData) }) </script> 这会导致错误： 500 Element is not defined at ./node_modules/@editorjs/editorjs/dist/editorjs.umd.js:1:76 at Object. (./node_modules/@editorjs/editorjs/dist/editorjs.umd.js:1:192) at Module._compile (node:internal/modules/cjs/loader:1376:14) at Module._extensions..js (node:internal/modules/cjs/loader:1435:10) at Module.load (node:internal/modules/cjs/loader:1207:32) at Module._load (node:internal/modules/cjs/loader:1023:12) at cjsLoader (node:internal/modules/esm/translators:345:17) at ModuleWrap. (node:internal/modules/esm/translators:294:7) at ModuleJob.run (node:internal/modules/esm/module_job:218:25) 甚至没有线索开始寻找解决方案（我已经看到这个问题是针对 Nuxt 2 提出的）。 由于 Nuxt 在初始页面加载时从服务器端渲染页面，因此大多数基于浏览器的 API（如 Element）不可用。要实现此目的，您可以将代码放入 if 检查中，如下所示： if (process.client) { const editor... } 使整个组件仅在客户端渲染的另一种方法是将其重命名为 write.client.vue。

nuxt内容降价页面使用我自己的组件？

我正在尝试使用 nuxt 内容创建自己的博客页面，以获得静态站点生成的好处。在样式方面，我使用了 tailwindcss，所以我制作了自己的组件来在整个页面上重用 css 样式...

nuxt.config.ts 不会读取环境变量

我发现自己处于一种相当奇怪的情况，我的 nuxt.config.ts 配置只想在某些情况下从我的 .env 读取变量。例如，在下面的示例中，它可以读取 NODE_ENV ...

为什么 useFetch 在向 api 发出请求后返回 HTML 而不是 JSON 对象？

我正在向 API 路由发出请求，并且 useFetch() 方法返回 HTML 而不是 JSON。我尝试注释掉代码块并手动逐步测试所有内容，但无济于事......

用数据填充indexedDb，这样你就不需要使用Firestore发出第二个请求

如何用nuxt加载本地JS文件

我的文件夹 /assets/js 中有多个脚本。 我将它们添加到 nuxt.config.js 中，如下所示： 脚本： [ { src: 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' }, { src: '~asse...

如何阻止核心 Web Vitals 失败 - nuxt 3

Nuxt 3 网站核心网络生命力已经急剧恶化。 GSC 将问题显示为 CLS 问题 - 然而，我们看不到直接的罪魁祸首，并尝试了一些方法，但没有发现任何差异...

使用内部 nuxt-link，如何附加整个主机名 URL 而不仅仅是路径？

我有一个简单的问题： 当我的 Nuxt 站点部署时，所有 NuxtLink 都会转换为 标签。但href中的URL是相对的。 例如：（参考图片 - ss1.png） ...

使用内部 nuxt-link，如何附加整个主机名 URL 而不仅仅是路径？

我有一个简单的问题： 当我的 Nuxt 站点部署时，所有 NuxtLink 都会转换为 标签。但href中的URL是相对的。 例如：（参考图片 - ss1.png） ...