vue工程中使用iconfont在线CDN不生效的问题

为什么在vue工程中引入iconfont有时候不生效呢？

请依次使用以下方法

1. 在index.html中引入在线资源

<!DOCTYPE html>
<html lang="en" style='height: 100%;'>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <!-- 引入下面这个cdn资源 -->
  <link rel="icon" href="//at.alicdn.com/t/font_918300_q5yxfof3wjo.css">

  <title>vue-shop-front</title>
</head>

<body style='height: 100%;'>
  <noscript>
    <strong>We're sorry but vue-shop-front doesn't work properly without JavaScript enabled. Please enable it to
      continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>

2. 在mainjs中使用Vue.use()引入

Vue.use('//at.alicdn.com/t/font_918300_q5yxfof3wjo.css')

3. 在App.vue中import引入（前提是你得使用了预处理器）

<style lang="scss" scoped>
@import url("//at.alicdn.com/t/font_918300_q5yxfof3wjo.css");
#wrap-box {
  height: 100%;
  // height: 1000px;
}
</style>
posted @ 2019-03-15 11:08  道理我都懂Zz  阅读(3074)  评论(0)  编辑  收藏  举报