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

请依次使用以下方法

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

  1. <!DOCTYPE html>
  2. <html lang="en" style='height: 100%;'>
  4. <head>
  5.   <meta charset="utf-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width,initial-scale=1.0">
  8.   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  9.   <!-- 引入下面这个cdn资源 -->
  10.   <link rel="icon" href="//at.alicdn.com/t/font_918300_q5yxfof3wjo.css">
  12.   <title>vue-shop-front</title>
  13. </head>
  15. <body style='height: 100%;'>
  16.   <noscript>
  17.     <strong>We're sorry but vue-shop-front doesn't work properly without JavaScript enabled. Please enable it to
  18.       continue.</strong>
  19.   </noscript>
  20.   <div id="app"></div>
  21.   <!-- built files will be auto injected -->
  22. </body>
  24. </html>

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

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

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

  1. <style lang="scss" scoped>
  2. @import url("//at.alicdn.com/t/font_918300_q5yxfof3wjo.css");
  3. #wrap-box {
  4.   height: 100%;
  5.   // height: 1000px;
  6. }
  7. </style>

vue工程中使用iconfont在线CDN不生效的问题的更多相关文章

  1. vue项目中引入iconfont

    背景 对于前端而言,图标的发展可谓日新月异.从img标签,到雪碧图,再到字体图标,svg,甚至svg也有了类似于雪碧图的方案svg-sprite-loader.雪碧图没有什么好讲的了,只是简单地利用了 ...

  2. vue工程中，如何查询用户访问的地理位置 + vue中的jsonp

    有一个需求,就是当用户访问你们公司的网站时,需要查到这位用户的地理位置(通过电脑ip来访问) 试了很多方法,感觉使用腾讯的位置服务api最好,返回的信息最全,包括经纬度,国家城市地区等.而其他绝大多数 ...

  3. 说下vue工程中代理配置proxy

    这个代理配置不需要后台进行ngnix代理跳转了,前端可以做.在vue.config.js文件中进行配置,如下: module.exports = { publicPath: process.env.V ...

  4. 如何在 Maven 工程中引入其他jar包 并生效？（以 Netty 为例）

    1.到 Maven 官网  查找 相关 框架 https://mvnrepository.com/artifact/io.netty/netty-all/4.1.32.Final 2.把相关 Xml体 ...

  5. vue项目中使用阿里iconfont图标

    在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...

  6. vue工程利用pubsub-js实现兄弟组件之间的通信

    前言 项目是基于vue-cli创建的,不会搭建vue开发环境的同学可以百度,这里不再赘述. 步骤流程 vue项目搭建完成之后的文件图如下: 我的上一篇博客已经详细叙述vue工程中各个文件的作用,不清楚 ...

  7. vue项目中使用mockjs模拟接口返回数据

    Mock.js 是一个模拟数据生成器,利用它,可以拦截ajax请求,直接模拟返回数据,这样前后端只要约定好数据格式,前端就不需要依赖后端的接口,可以直接使用模拟的数据了. 网上介绍mock的教程也较多 ...

  8. 在vue项目中获取当前城市

    在vue项目中使用百度地图获取当前城市:https://www.jianshu.com/p/0819cfd46712 Vue2 :百度地图bmap:https://www.jianshu.com/p/ ...

  9. vue工程本地代码请求http发生跨域提示错误解决方法

    这个可以使用代理进行跨域,这样看来跨域的方法就有几种了,对于iframe中的用postmassage,对于vue工程中的跨域则使用代理模式. 代理模式配置如下: 在config文件夹下找到index. ...

随机推荐

  1. JavaEE互联网轻量级框架整合开发（书籍）阅读笔记（3）：常用动态代理之JDK动态代理、CGLIB动态代理

    一.动态代理的理解 动态代理的意义在于生成一个占位(又称代理对象),来代理真实对象,从而控制真实对象的访问.        先来谈谈什么是代理模式.        假设这样一个场景:你的公司是一家软件 ...

  2. Android getDimension，getDimensionPixelOffset，getDimensionPixelSize

    1.例如在onMeasure(int , int)方法中可能要获取自定义属性的值.如: TypedArray a = context.obtainStyledAttributes(attrs, R.s ...

  3. Windows实用功能

    查看程序crash日志:"Computer Management"-"System Tools"-"Event Viewer"-" ...

  4. MS SQL Server计算间隔时间

    开始需要,写了一个计算时间间隔的函数,可以参考: 得到的结果: 再列举一个例子:

  5. Response Assertion(响应断言)

    响应断言可以让你添加匹配字符串来匹配请求和响应的各个字符串. 匹配字符串可以是1.Contains和Matches正则表达式:2.Equals和SubString文本类型,大小写敏感. Apply t ...

  6. 引用面试官文章 ：如何准备Java初级和高级的技术面试

    本人最近几年一直在做java后端方面的技术面试官,而在最近两周,又密集了面试了一些java初级和高级开发的候选人,在面试过程中,我自认为比较慎重,遇到问题回答不好的候选人,我总会再三从不同方面提问,只 ...

  7. IO相关3(string流)

    sstream 头文件定义了三个类型来支持内存 IO,这些类型可以向 string 写入数据,从 string 读取数据,就像 string 是一个 IO 流一样. istringstream 从 s ...

  8. 通过get_FOO_display 查找模型中的choice值

    在django的models.py 中,我们定义了一些choices的元组,类似一些字典值,一般都是下拉框或者单多选框,例如 0对应男 1对应女等. class Area(models.Model): ...

  9. 5.EM

  10. 题解 P1632 点的移动

    P1632 点的移动 题目描述 平面上有N个整数坐标点.如果将点(x0,y0)移动到(x1,y1),则需要的代价为|x0-x1|+|y0-y1|.求使得K(K=1,-,N)个点在同一位置上最少需要的代 ...