问题标签 [nuxtjs]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
369 浏览

javascript - Nuxt 定制路由器

我正在尝试使用以下内容在 Nuxt 中创建自定义路由 nuxt.config.js

虽然,当我访问localhost:3000/here-i-am - 它正在抛出:This page cannot be found.我已经在目录Slug.vue下创建了/pages

我还缺少其他东西吗?我试图重新运行编译器。

0 投票
1 回答
8838 浏览

css - 如何在 TailwindCSS 和 NuxtJS 中使用自定义字体?

所以我正在用 NuxtJS 构建一个网站,使用 Tailwind CSS 作为我的样式。我正在使用@nuxtjs/tailwindcss 模块。

问题是我的字体似乎没有在浏览器上加载。font-family正如您在 devtools 屏幕截图中看到的那样,CSS 仍然应用了正确的内容,但是浏览器仍然使用 Times New Roman 呈现我的文本。

--开发工具截图

我的字体文件是 .ttf 文件,存储在/assets/fonts/我项目根目录的文件夹中。

我的tailwind.css文件看起来像这样

我的tailwind.config.js样子是这样的

我想完全覆盖 Tailwind 的基本字体,所以我没有使用extend,我计划在弄清楚如何正确执行此操作后清理它并为某些文本使用其他字体。

我的直觉告诉我 Tailwind 不是问题,因为 Devtools 实际上将 Montserrat 显示为计算字体,并且 webpack 构建不会引发任何错误。

我已经尝试了这个相关问题中的两个答案,接受的一个实际上是我的实现,但到目前为止没有好的结果。

如果有人可以帮助我,我将不胜感激!

编辑:我创建了一个 Github repo 来重现这个问题,它可以在这里找到,所有重现的步骤都在 README.MD 中

0 投票
1 回答
2436 浏览

javascript - Nuxt Js - 在初始页面加载期间仅加载一次脚本

我已经设计了一个静态网站,并且我正在转换为 Nuxt js,因为该网站需要具有交互性。在我运行我的 Nuxt 服务器“npm run build...npm run start”之后,脚本被加载并且我的轮播/幻灯片工作正常。当我使用 nuxt-link 导航到下一页时,幻灯片/轮播不再起作用。我认为问题在于我的脚本仅在从服务器加载时才最初加载。

在我的 nuxt.config.js 文件中,我已经在全局和我的组件中的 api 文档之后的 head 标记中包含了 js,但它是相同的

通过一些在线资源,我添加了async: true 和 defer: true,但这似乎都是一样的

下面的图片是推荐轮播如何查看页面加载和 nuxt-link 导航后的屏幕截图 初始页面加载时的图像

nuxt-link 导航后的图像

请有关如何解决此问题的任何建议?非常感谢

PS:当我通过重新加载选项卡完全重新加载页面时,幻灯片可以完美运行。

0 投票
1 回答
1200 浏览

javascript - nuxtjs 头部元标记在 fetch() 上动态修改

我在 Nuxtjs 中有这个组件,它呈现使用 API 的 fetch 方法获取的内容。API 将数据作为嵌套对象返回。当我将此数据传递给元标记的 head() 方法时,它仅适用于一层深度,但不适用于嵌套数据。这是为什么?

在这段代码中,我们将接收到的数据分配给组件 data() 中的 const post this.post = data.response.results[0];。然后在使用this.post.webTitle它时很好,但是在使用时this.post.fields.thumbnail出现错误,说明缩略图未定义。

单独分配时

然后它工作正常,我可以使用:

我不明白为什么它不能以第一种方式工作?为什么我必须单独分配“更深”的数据以使其可用于组件?

提前感谢您的帮助

0 投票
0 回答
93 浏览

vue.js - Nuxtjs - this.$router 在 vuex 中有两个反应

我将 nuxtjs 与 SSR 和 vuex 一起使用

在我的商店中,我有一个“动作”功能,可以从 url 获取查询和参数

但我有两个反应

  1. 当我直接进入使用此操作的页面时,我有我当前的路线
  2. 当我从另一个页面(通过 nuxt-link)进入此页面时,当我打电话时我有我以前的路线,当我打电话和开发this.$router.history.current时我有我当前的路线this.$router.historycurrent

在此处输入图像描述

我不知道为什么 vueRouter 和 vuex 会这样工作。任何人都可以帮助我吗?

0 投票
1 回答
97 浏览

vue.js - 如何导入库并在所有存储文件中使用它 nuxtjs

我正在使用 nuxtjs,我想一次导入库并在任何存储文件上访问它,例如

从“sweetalert2”导入 Swal

谢谢你

0 投票
2 回答
27 浏览

javascript - 登录后无法重定向?

TypeError: Cannot read property '$router' of undefined登录后尝试重定向时得到一个。我在路由器实例上尝试了各种方法,但根据控制台未定义?

登录操作(店内):

0 投票
2 回答
753 浏览

server-side-rendering - NUXT SSR 使用图像

我有一个内置于 Nuxt 的 SSR 应用程序。我正在使用 renderRoute 来渲染 Vue 文件,因为我需要将数据发送到客户端。一切正常,但静态图像没有加载到我的应用程序中。我正在使用以下代码在我的 vue 文件中插入图像。

<img src="~assets/img/picture.png">

0 投票
0 回答
176 浏览

vue.js - NuxtJS 内容错误 @nuxtjs/content

当我将@nuxtjs/content 添加到我的项目中时,出现此错误:

此错误源于在没有 catch 块的情况下抛出异步函数内部,或拒绝未使用 .catch() 处理的承诺。要在未处理的 Promise 拒绝时终止节点进程,请使用 CLI 标志--unhandled-rejections=strict(见https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode)。(拒绝编号:2)

节点版本:v12.18.0 NuxtJS 版本:2.0.0

0 投票
1 回答
1198 浏览

javascript - Nuxt Js 全局 CSS 与本地 CSS 问题

我目前正在使用管理模板开发 nuxt 应用程序。我熟悉 vue js,但 nuxtjs 部分中的加载资产对我来说有点混乱。我正在将管理模板页面转换为 nuxt 页面组件。我将在这个问题中讨论电子邮件页面(具有相同问题的许多页面之一)。

基本管理页面在页面上加载了各种 CSS 文件。有些是全局级别的,有些是页面级别的。我在 nuxt.config.js 文件中添加了全局 CSS

我尝试像这样加载页面级 CSS。

当我像这样添加页面级 CSS 时,它根本不起作用。样式未加载。但是,正如预期的那样,当我在 nuxt.config.js 的全局样式中添加相同的样式表时,它可以工作了!

知道我在这里缺少什么吗?干杯。