vue项目中iconfont在线CDN无效的问题

顺晟科技

2021-08-07 11:05:40

191

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

请依次使用以下方法

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

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

<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: ;\'>
  <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: ;
  // height: 1000px;
}
</style>

上一篇：什么事：阿俊视图-cli3僧曰SVG 下一篇：Vue3打包代码运行报错

网站建设

Js

vue项目中iconfont在线CDN无效的问题

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

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

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