在vue的项目中加入 <font-awesome-icon :icon="['fas','star']" />会报错?

报错信息:The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
但是图标会显示?请问怎么修改

阅读 1.4k
评论
    2 个回答
    • 1.6k

    你需要引入这个组件

    import fontAwesomeIcon from 'xxxxx'
    export default {
      components: { fontAwesomeIcon }
    }

    然后再去使用,应该就可以了。


    首先你要确保这三个东西都装了

     npm i --save @fortawesome/pro-solid-svg-icons
     npm i --save @fortawesome/pro-regular-svg-icons
     npm i --save @fortawesome/pro-light-svg-icons

    然后,需要在main.js里面引入

    import { library } from '@fortawesome/fontawesome-svg-core'
    import { faCoffee } from '@fortawesome/free-solid-svg-icons'
    import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
     
    library.add(faCoffee)
     
    Vue.component('font-awesome-icon', FontAwesomeIcon)

    然后你再使用应该就不会报错了。
    npm官方文档


    如果是nuxt项目,你可以找到/layouts/default.vue这个文件,在这个文件加入以下引入的代码,就可以了。亲试。

    <script>
    import Vue from 'vue'
    import { library } from '@fortawesome/fontawesome-svg-core'
    import { faCoffee, faSpinner } from '@fortawesome/free-solid-svg-icons'
    import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
    library.add(faCoffee,faSpinner)
    Vue.component('font-awesome-icon', FontAwesomeIcon)
    export default {
      
    }
    </script>

      可能你的html标签写的不完整报的错。

        撰写回答

        登录后参与交流、获取后续更新提醒