vue中引入font-awesome

npm i -S font-awesome

 之後在main.js中引入font-awesome

import 'font-awesome/css/font-awesome.css'

執行npm run dev 時報錯了： 

in ./node_modules/[email protected]@font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0 

解決辦法： 

 {         
        test: /\.(gif|jpg|jpeg|png|svg)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 1024 * 30, // 當文件大小小於limit byte時會把圖片轉換爲base64編碼的dataurl，否則返回普通的圖片
              name: "assest/images/[name]-[hash:5].[ext]", // 圖片文件名稱加上內容哈希
              fallback: "file-loader",
              publicPath: "../../"
            }
          }
        ]
      },
      {
      test: /\.(woff|ttf|eot)\??.*$/,
      use: [
        {
          loader: "file-loader",
          options: {
            name: "assest/font/[name].[ext]",
            // fallback: "file-loader",
            publicPath: "../../"
          }
        }
      ]
    }

 上面把字體文件單獨提取出來

使用如下：

<i class="fa fa-clock-o"></i>