标签: nuxtjs

使用 vuetify 的 NuxtjsUsing / for division is deprecated and will be removed in Dart Sass 2.0.0.在纱线开发期间抛出大量错误

Nuxtjs: v2.15.6 @nuxtjs/vuetify": "1.11.3", "sass": "1.32.8", "sass-loader": "10.2.0",

谁知道怎么修它 ？

: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($grid-gutter, 3)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ?
63 ?     'md': $grid-gutter / 3,
   ?           ^^^^^^^^^^^^^^^^
   ?
    node_modules/vuetify/src/styles/settings/_variables.scss 63:11  @import
    node_modules/vuetify/src/styles/settings/_index.sass 1:9        @import
    node_modules/vuetify/src/styles/styles.sass 2:9                 @import
    node_modules/vuetify/src/components/VIcon/_variables.scss 1:9   @import
    node_modules/vuetify/src/components/VIcon/VIcon.sass 2:9        root stylesheet

: …

当我为 StackOverflow写这个答案时，我遇到了一个问题，即我想在服务器启动时（或服务器启动时）在 Nuxt.js 中执行一次某些代码。

我想过编写一个模块或插件，但没有成功，因为每次我联系服务器时，即每次调用localhost:3000/myPage时，都会执行这两个模块或插件。可能我缺少正确的模块挂钩或某些插件设置？

由于我在官方文档中找不到有关此问题的任何信息，因此我现在想出了一个相当丑陋的解决方案：我编写了一个服务器中间件，它执行一些代码（应该只运行一次的代码），然后返回一个空处理程序 -现在，这为每个请求增加了（少量）不必要的开销。

我的问题：在启动期间/启动后而不是在构建期间在 Nuxt.js 服务器上执行一次某些代码的最佳方法是什么？

最小的丑陋工作示例：

nuxt.config.js:

export default {
  ...
  serverMiddleware: [ "~/serverMiddleware/run-once.js" ]
  ...
}

~/serverMiddleware/run-once.js:

console.log("Yay, I only run once when the server is started!")
// Since we are a serverMiddleware, we have to return a handler, even if this it does nothing
// I think this is really ugly...
export default function (req, res, next) {
  next()
}

PS：我看到诸如Nuxt JS 插件是否可以只运行一次？但它似乎没有回答我的问题，因为 …

我正在将 NUXTJS 应用程序用于 SSR 页面，但出现 bootstrap-vue 图标大小问题的错误。

该文件托管在 AWS 服务器中，这将是错误

The code generator has deoptimised the styling of 
/var/www/html/my_folder/node_modules/bootstrap-vue/src/icons/icons.js
as it exceeds the max of 500KB.

这将是什么问题？我也在构建位置添加了 babbel ..

使用 nuxt.js 时fetch()，每当我重新加载页面时，它都不会再次获取它。仅当我来自路由器链路时。如何强制它从我的 API 中实际重新获取？

export default {
    async fetch() {
        const data = await this.$axios.$get(`/users/${this.$route.params.name}`)
        this.user = data
    },
    data() {
        return {
            user: []
        }
    }
}

我查看的每个页面，他们总是在页面刷新时显示占位符，同时从他们的 API 重新获取，为什么我的 Nuxt.js 应用程序在刷新时不这样做？它只是没有从我的 API 重新获取数据，这很奇怪。

Vue 中输入事件的正确 Typescript 类型是什么？当我使用Event它时，缺少目标值或密钥或文件属性。

让我们举个例子：

<input @input="(e: MISSING_TYPE) => {}" />
<input @keypress="(e: MISSING_TYPE) => {}" />

在 React 中，我们有类似ChangeEvent 的东西，它是通用的并且应用元素特定类型。我们在 Vue 中如何做到这一点？

我想构建一个具有静态前端（target: 'static'在 nuxt.config.js 中）和使用ktor的后端的应用程序。该应用程序需要对用户进行身份验证，但我不想自己管理密码和事物，因此我想与 AWS Cognito 集成。根据我的理解，我认为这是我想要的工作流程：

1. 用户匿名浏览网站（无需登录）
2. 他们执行一些需要登录或明确单击登录按钮的操作。
3. 用户被重定向到 AWS Cognito ui 进行登录。他们可以注册新帐户、使用现有帐户登录或使用其他提供商登录（在为其配置 Cognito 之后）。
4. Cognito ui 将用户重定向回应用程序 ui，但在查询参数中使用 JWT 令牌（我认为这就是 Cognito 的做法）
5. JWT 令牌（s？）存储在 vuex store/nuxt auth 中
6. 向后端发出请求时使用令牌。以及在用户通过身份验证时显示一些额外的组件/操作以及他们的基本信息，如用户名（jwt 的一部分？）

我想我已经正确设置了 cognito 和 ktor 后端，但我不知道如何开始使用前端。

• 该nuxt验证模块指南说，设立中间件，但据我所知中间件仅用于服务器端渲染应用程序。
• 我需要激活vuex 商店，但我不知道在那里放什么。auth 模块是否需要一些特定的东西，还是我只是在目录中创建一个空文件？
• 我如何告诉它何时从查询参数重定向或读取令牌？
• 如何解析 JWT 令牌（如果它不自动）并从中获取一些有效负载信息，例如用户名？
• axios 模块是否会自动配置以使用它？

我在 auth 模块 repo 中发现了这个旧的 github 问题195，但我相信这是当“登录表单”/ui 是 nuxt 应用程序的一部分并且客户端在没有“重定向”的情况下使用 cognito api 时。

不幸的是，这个堆栈中的所有内容对我来说都是新的，因此感谢任何帮助。如果已经有一个项目在做类似的事情，我会查看代码并尝试弄清楚，但现在我迷路了。

2020 年 12 月 31 日更新，主要是为了让我很快就能悬赏：https …

版本

• 下一个：2.14.6
• 节点：v15.9.0

预期是什么？

将每个更新文件上传到 dist 文件夹内的共享托管后。浏览器将加载新版本

到底发生了什么？

正在使用共享托管来托管该项目。我正在使用 nuxt generate命令编译它。编译并上传每次更新后，它不会生效，需要重新加载页面。假设我的域名是这样的，http://example.com如果我在浏览器中输入它，它会加载旧版本。但是，如果我输入http://example.com/login它加载新版本，但如果我关闭选项卡并再次加载http://example.com其加载旧版本，则不会更新浏览器缓存。如果我加载http://example.com旧版本并重新加载页面，它会更新浏览器缓存。另外我正在使用 nuxtjs pwa 有没有机会使用 pwa 发生这个问题？

开发 Nuxt.js 时

cannot find module '@ vue / composition-api

我收到一个错误。为什么会出现这个错误？

参考文档，我添加layouts/error.vue了一个页面处理错误。在开发 ( npm run dev) 中对此进行测试，一切都按预期进行。但是，当我这样做npm run build，然后npm start，该错误页面是不是当我测试的生产抛出异常呈现。

我正在使用，SSR但我在文档中没有看到任何建议不适layouts/error.vue用于SSR通用站点的内容。有一个类似的问题报告。该人为他们的用例做了一个变通方法。但是问题（主错误处理程序被忽略，异常最终记录到控制台而不是呈现错误页面）没有解决。

在开发中，如果我通过throw new Error()单击按钮引发测试错误，则会显示错误页面。但是在生产中，错误只会进入控制台，并且不会呈现错误页面。我可以让它在生产中工作而不改变很多其他代码的唯一方法是debug: true在nuxt.config.js.

另请注意，error.vue对于 404 页，它也可以在生产中完美运行。但是，如果我throw new Error从组件进行生产构建，它就不会像在开发中那样工作。

您可以通过使用npm create nuxt-app <app name>. 以下是我选择的设置：

将以下内容添加到layouts/error.vue：

<template>
  <div>
    <h1>You are in layouts/error.vue</h1>
    <h1 v-if="error.statusCode === 404">Page not found</h1>
    <h1 v-else>An error occurred</h1>
    <pre v-if="error.statusCode !== 404">{{ error }}</pre>
    <nuxt-link …

我正在尝试向 nuxt js 项目中的布局之一添加“获取”函数。我正在使用 nuxt 的最新版本（2.14.0）。

当服务器渲染布局时，我在控制台（服务器端）收到此消息：

WARN  Cannot stringify arbitrary non-POJOs i                                                                                                                                                                      

WARN  Cannot stringify POJOs with symbolic keys Symbol(Symbol.toStringTag)

当我从布局中删除获取功能时，此消息消失

目前我的 fetch 函数没有做太多事情

export default {
...      
   fetch () {
        console.log('in fetch')
   }
...
}

我正在研究这个 WARN 消息的含义，据我所知，这个错误来自 @nuxt/devalue 库。

有谁知道如何调查此 WARN 消息的来源吗？

谢谢！