鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ 在vue的項(xiàng)目中加入 <font-awesome-icon :icon=

在vue的項(xiàng)目中加入 <font-awesome-icon :icon="['fas','star']" />會(huì)報(bào)錯(cuò)?

報(bào)錯(cuò)信息: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.
但是圖標(biāo)會(huì)顯示?請(qǐng)問怎么修改

回答
編輯回答
陌南塵

你需要引入這個(gè)組件

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

然后再去使用,應(yīng)該就可以了。


首先你要確保這三個(gè)東西都裝了

 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)

然后你再使用應(yīng)該就不會(huì)報(bào)錯(cuò)了。
npm官方文檔


如果是nuxt項(xiàng)目,你可以找到/layouts/default.vue這個(gè)文件,在這個(gè)文件加入以下引入的代碼,就可以了。親試。

<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>
2017年7月14日 19:53
編輯回答
毀與悔

可能你的html標(biāo)簽寫的不完整報(bào)的錯(cuò)。

2017年12月15日 12:14