返回

javascript-你如何在 nuxt 3 上设置好字体

发布时间:2022-06-25 15:30:12 399
# 前端

当我尝试在我的nuxt 3应用程序中呈现这个字体很棒的组件时,我遇到了以下错误,遵循了所有npm的正确安装,并且无法在应用程序中获得没有任何错误的图标。

  at WeakMap.set ()  
  at normalizePropsOptions (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3966:11)  
  at createComponentInstance (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6957:23)  
  at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:171:22)  
  at Module.ssrRenderComponent (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:608:12)  
  at _sfc_ssrRender (./.nuxt/dist/server/server.mjs:2939:33)  
  at renderComponentSubTree (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:253:13)  
  at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:188:16)  
  at Module.ssrRenderComponent (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:608:12)  
  at _sfc_ssrRender (./.nuxt/dist/server/server.mjs:9374:31)

这是破坏应用程序的代码行

<font-awesome-icon :icon="['fas', 'user']" />

nuxt.config file

import { defineNuxtConfig } from "nuxt";

export default defineNuxtConfig({
    css: ["@/assets/css/tailwind.css"],
    build: {
        postcss: {
            postcssOptions: {
                plugins: {
                    tailwindcss: {},
                    autoprefixer: {},
                },
            },
        },
    },
    plugins: ["~/plugins/fontawesome.js"],
    buildModules: [
        ["@pinia/nuxt", { disableVuex: true }],
        ["@nuxtjs/tailwindcss", { config: "@/tailwind.config.js" }],
    ],
    modules: ["@nuxtjs/tailwindcss"],
});

plugin file

import { library } from "@fortawesome/fontawesome-svg-core";
import { fas } from "@fortawesome/free-solid-svg-icons";
// import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

export default defineNuxtPlugin((nuxtApp) => {
    // nuxtApp.vueApp.component("FontAwesomeIcon", FontAwesomeIcon);
    library.add(fas);
});

我之所以使用这个插件,是因为无论出于什么原因,设置npm@nuxt/fortawesome都不起作用

package.json


    "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^6.1.1",
        "@fortawesome/free-brands-svg-icons": "^6.1.1",
        "@fortawesome/free-solid-svg-icons": "^6.1.1",
        "@fortawesome/vue-fontawesome": "^2.0.8",
        "@supabase/supabase-js": "^1.35.3",
        "pinia": "^2.0.14"
    }
}
特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报
评论区(0)
按点赞数排序
用户头像