为什么在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>

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. oracle数据库数据类型和约束

    今天为大家分享一下关键数据库里面的数据类型和约束.我们都知道国家要讲法律,干什么事情都要遵守法律,比如小的时候你上学的时候要遵守课堂纪律.不能迟到和早退,同样的我们在数据库中创建一些表.或者查询一些表 ...

  2. （转）Asp.Net底层原理(三、Asp.Net请求响应过程)

    原文地址:http://www.cnblogs.com/liuhf939/archive/2013/09/16/3324753.html 在之前,我们写了自己的Asp.Net框架,对整个流程有了一个大 ...

  3. 开源IMS平台中间件Mobicents

    下面内容来自百度百科 Mobicents 是一个高伸缩性.事件驱动的应用服务器.是一款专业的.开放源代码的 VoIP 中间件平台.Mobicents是首个采用JAIN SLEE标准的开放式源代码电信应 ...

  4. mvc 高并发解决方案之一---存储过程

    MVC用户访问多线程,一般的lock是无法造成单例的. 存储过程既是一种解决方案,先来看看存储过程优缺点: A. 存储过程允许标准组件式编程 存储过程创建后可以在程序中被多次调用执行,而不必重新编写该 ...

  5. oracle 新增主键

    alter table tablename add constraint pk_tablename primary key (column1,column2,...); 可以新增单主键或联合主键: 新 ...

  6. Eclipse下的Hadoop应用开发准备

    window下开发的准备: A.在windows的某个目录下解压一个hadoop的安装包 B.将安装包下的lib和bin目录用对应windows版本平台编译的本地库替换 C.在window系统中配置H ...

  7. leecode刷题（3）-- 旋转数组

    leecode刷题(3)-- 旋转数组 旋转数组 给定一个数组,将数组中的元素向右移动 K 个位置,其中 K 是非负数. 示例: 输入: [1,2,3,4,5,6,7] 和 k = 3 输出: [5, ...

  8. Python获取网页Html文本

    Python爬虫基础 1.获取网页文本 通过urllib2包,根据url获取网页的html文本内容并返回 #coding:utf-8 import requests, json, time, re, ...

  9. Flink学习笔记：Connectors概述

    本文为<Flink大数据项目实战>学习笔记,想通过视频系统学习Flink这个最火爆的大数据计算框架的同学,推荐学习课程: Flink大数据项目实战:http://t.cn/EJtKhaz ...

  10. javascript阻止事件冒泡的方法

    有的时候我们需要实现这样的功能: 点击某个蒙版,该蒙版消失,但是如果点击蒙版上的某个元素,希望蒙版不消失,这就需要用到阻止事件的冒泡了 html: <div id="outer&quo ...