标签: nuxtjs

因此，我正在使用 Tailwind CSS 为我的样式使用 NuxtJS 构建一个网站。我正在使用 @nuxtjs/tailwindcss 模块。

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

-- Devtools 截图

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

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

@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@font-face {
  font-family: 'Montserrat';
  font-weight: 400;
  src: url('../fonts/Montserrat-Regular.ttf') format('ttf');
}

@font-face {
  font-family: 'Montserrat';
  font-weight: 700;
  src: url('../fonts/Montserrat-Bold.ttf') format('ttf');
}

@font-face {
  font-family: 'Montserrat';
  font-weight: 900;
  src: url('../fonts/Montserrat-Black.ttf') format('ttf');
}

我tailwind.config.js看起来像这样

module.exports = {
  theme: {
    fontFamily: {
      sans: ['Montserrat'],
      serif: ['Montserrat'],
      mono: ['Montserrat'],
      display: …

我来自 SPA / React 世界，正在开发我的第一个 Nuxtjs SSR 应用程序。

当我运行 npm run build 时，我期望创建工件，这些工件可以复制到我的生产环境，然后使用服务器上的节点运行。当我执行 npm run build 时，我在 dist 文件夹中什么也没有得到，但在 ./nuxt/dist 中有两个文件夹：服务器和客户端。

完全不知道如何从那里继续。所有在线帮助似乎都适用于非生产版本，并且存在整个开发文件夹来运行 nuxt start。

如何进行生产部署并使用服务器上的节点运行它

我正在尝试向 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 消息的来源吗？

谢谢！

我发现这篇很棒的文章可以在 Nuxt v2.13 应用程序中正确管理环境变量。我只是尝试实现建议的逻辑，但我遇到了一些问题，我想问你。

我设置 publicRuntimeConfig 和 privateRuntimeConfig 如下。我正在使用 Contentful，因此我必须正确设置 Contentful 令牌才能进行 API 调用。

export default {
  // Nuxt target - See https://nuxtjs.org/api/configuration-target
  target: 'static',

  // Nuxt rendering mode - See https://nuxtjs.org/api/configuration-mode
  mode: 'universal',

  // Both server and client.
  publicRuntimeConfig: {
    backendApi: process.env.BACKEND_API_URL
    shopUrl: process.env.SHOP_URL
  },

  // Only available on server using same $config (it overrides publicRuntimeConfig)
  privateRuntimeConfig: {
    ctfSpaceId: CTF_SPACE_ID,
    ctfCdaAccessToken: CTF_CDA_ACCESS_TOKEN,
    ctfCpaAccessToken: CTF_CPA_ACCESS_TOKEN,
    ctfEnvironment: CTF_ENVIRONMENT
  },

在模块导出语句上方，我必须定义 .env 中的数据，因此：

require('dotenv').config()

const {
  CTF_SPACE_ID,
  CTF_CDA_ACCESS_TOKEN,
  CTF_CPA_ACCESS_TOKEN,
  CTF_ENVIRONMENT, …

我试图在路由之间添加一个如 nuxt.js 文档中所示的加载器，但它不起作用。但我无法在应用程序启动之前添加启动画面。

我的components/loading.vue 中的代码片段

<template>
  <div v-if="loading" class="loading-page">
    <p>Loading...</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    loading: false
  }),
  methods: {
    start(){
      this.loading = true
    },
    finish(){
      this.loading = false
    }
  }
}
</script>

export default {
...

loading: '~/components/loading.vue'
...
}