解决webpack+Vue引入iView找不到字体文件的问题
原因:
css-loader后面带了参数modules(打包报错)
url-loader后面带了参数name(引入报错)
{ test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader?modules!postcss-loader" }) }, { test: /\.(svg|ttf|eot|woff)\??.*$/, loader: "url-loader?limit=10000&name=fonts/[name].[ext]" }
解决方案:去掉参数
{ test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader!postcss-loader" }) }, { test: /\.(svg|ttf|eot|woff)\??.*$/, loader: "url-loader?limit=10000" }
或者
{ test: /\.css$/, exclude: /node_modules/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader?modules!postcss-loader" }) }, { test: /\.css$/, include: /node_modules/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader!postcss-loader" }) }, { test: /\.(svg|ttf|eot|woff)\??.*$/, loader: "url-loader?limit=10000" }
以上这篇解决webpack+Vue引入iView找不到字体文件的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
在vue项目中引用Iview的方法
关于 iView iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品. 特性 # 高质量.功能丰富 友好的 API ,自由灵活地使用空间 细致.漂亮的 UI 事无巨细的文档 可自定义主题 iview 安装 npm install iview --save 引入iview import Vue from 'vue' import App from './App' import router from './router' import iView fro
-
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
使用vue打包,通过css引用图片资源. .img { height: 500px; width: 100%; background: url("./assets/img/1.jpg") no-repeat; background-size: 100%; } 热更新开发环境的效果是这样 但打完包出来的页面却报找不到资源的错误. 查了一下原因,css引入图片再打包后,style-loader无法设置自己的publicPath,于是我改变了ExtractTextPlugin的css路径pu
-
解决在vue项目中webpack打包后字体不生效的问题
最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unicode编码并且带着双引号, 但使用webpack打包以后,"微软雅黑"的双引号被错误解析并多加了个反斜杠,导致字体不生效. 解决方法: 尝试了一下去掉双引号,也就是font-family:微软雅黑,这样浏览器并不会把中文字体用unicode编码,样式也可以正常显示.但为了更好的兼容性,这里
-
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
1.vue中的vue-cli打包 最近在用vue写一个小项目,其中就用到了vue脚手架工具vue-cli,在测试打包后能否运行过程中遇到不少问题,而且在网上这些问题答案都不太好找,废话不多说,进入正题. a.执行打包命令:npm run build b.打包之后生成的文件夹为根目录下的dist文件: c.进入dist中 在运行这个index.html之前先说说一些打包配置问题: 在config文件夹下可以看到一个index.js文件,打开其中可以看到有几个属性分别是: assetsRoot: p
-
解决webpack+Vue引入iView找不到字体文件的问题
原因: css-loader后面带了参数modules(打包报错) url-loader后面带了参数name(引入报错) { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader?modules!postcss-loader" }) }, { test: /\.(svg|ttf|eot|woff)\??.*$/, loader: &quo
-
vue.js iview打包上线后字体图标不显示解决办法
在vue+cli项目中使用iview组件及icon图标,打包后icon不显示,解决办法: 1.在build文件夹下找到utils.js文件,把publicPath改为 ../../ if (options.extract) { return ExtractTextPlugin.extract({ publicPath:'../../', use: loaders, fallback: 'vue-style-loader' }) } else { return ['vue-style-loader
-
vue 打包后找不到dist文件夹的解决方案
目录 打包后找不到dist文件夹 运行vue打包后的dist文件夹下的项目 需要安装http-server 通过命令行进入到dist文件夹 打包后找不到dist文件夹 接受一个别人做了一半的项目 , 结果要打包测试的时候 执行npm run build 后 没有dist 文件 看了一下 config文件夹里面的index.js 文件 的build对象, 原来是默认的打包路劲被修改了 , 修改回来就好了, __dirname是获取当前位置的绝对路径 运行vue打包后的dist文件夹下的项目 需
-
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下 一.首先修改config目录下的index.js文件 将其中build的配置项assetsPublicPath进行修改,改为 目的是将资源文件的引入路径,改为相对地址(相对index.html) 二.此时html中的js.css.img引入均没有问题,但是css中的background-image还是报404 此
-
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
在vue的实际开发中往往会遇到公用一个组件的问题,比如有一个菜单中的两个按钮,点击每个按钮调用的是同一个组件,其内容是根据路由的参数的不同来请求不同的内容. 第一步,首先新建一个vue+webpack+vuecli的demo,如下操作: 全局安装vue-cli,vue-cil是vue的脚手架工具,安装命令: npm install -g vue-cli 第二步,进入到工程目录中,创建一个vuedemo的文件夹工程,如下两步操作: cd vue_test_project //进入vue_test_
-
创建Vue项目以及引入Iview的方法示例
创建Vue项目 以及引入Iview 官方文档 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖,走你 $ cd my-project $ npm install $ npm run dev 以上是vue官方文档中Vue.js 提供一个 官方命令行工具 创建vue项目的方法. 我创建Vue项目过程 $ vue init webpack
-
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置: if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../', // 注意配置这一部分,根据目录结构自由调整 fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(lo
-
浅谈vue引入css,less遇到的坑和解决方法
在使用vux开发手机页面时,引入vux的公共样式less一直报错,通过各种百度,Google都没有解决,走了很多弯路.最后才发现钻牛角尖了,可以换一种方法引入. 1.报错的使用:在App中 @ ./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vux/src/styles/reset. less 3:10-115 @ ./~/css-loader?{"minimize":false,&
-
解决vue 引入子组件报错的问题
错误信息: Do not use built-in or reserved HTML elements as component id: header 源码: <script> import header from "./components/header" import aside from "./components/aside" import footer from "./components/footer" export de
-
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
vue +webpack 项目中数据更新后页面没有刷新问题,ie11下,如果GET请求请求相同的URL,默认会使用之前请求来的缓存数据,而不会去请求接口获取最新数据,我用的解决方法是在每个请求发送前,拦截请求并给请求接口的URL后加一个时间戳(new Date().getTime()),这样就保证了每一次请求的URL都不同,ie11就会不断的请求接口而不使用缓存数据. 代码如下 if(config.url.indexOf('?')>-1){ config.url = url + config.u
随机推荐
- PHP 编程的 5个良好习惯
- python调用shell的方法
- 基于Vue实例生命周期(全面解析)
- Java集合Map常见问题_动力节点Java学院整理
- Asp.net静态方法之Grid转DataTable方法实现步骤
- 详解JavaScript中基于原型prototype的继承特性
- js操作iframe兼容各种主流浏览器示例代码
- C#推送信息到APNs的方法
- JQuery validate插件验证用户注册信息
- 基于JSP的动态网站开发技术
- pc加载更多功能和移动端下拉刷新加载数据
- 如何创建一个JavaScript弹出DIV窗口层的效果
- JS验证input输入框(字母,数字,符号,中文)
- Javascript学习笔记之函数篇(五) : 构造函数
- 清除垃圾的VBS文件 自动查找多个盘
- C#通过xpath查找xml指定元素的方法
- android 更改TextView中任意位置字体大小和颜色的方法
- 小程序rich-text组件如何改变内部img图片样式的方法
- java命令调用虚拟机方法总结
- 易语言通过取设备句柄命令获取指定画板的设备场景句柄