webpack打包后iconfont文件路径问题解决

在使用vue-cli创建vue项目时,可以自动生成webpack文件。使用

npm run build

  即可打包发布生产文件,打包后的文件

可以看到使用url-loader处理后的文件是在static目录下生成fonts目录下的文件。全部样式文件打包在css目录下app.hash.css文件中。 
但我们会发现发布后,会存在字体文件找不到的问题,查看css文件发现是iconfont字体文件的路径引用问题。

解决方法: 
在build/utils文件中的下图所示位置添加../../公共路径

这样打包的iconfont字体文件路径时就会加上../../了。引用就没问题了。而不再需要手动更改css文件中的路径。

原文地址:https://www.cnblogs.com/liliuyu/p/11555755.html

时间: 2024-08-17 18:10:23

webpack打包后iconfont文件路径问题解决的相关文章

webpack打包后的文件

参考vue脚手架的webpack配置,做一个项目后,会发现产出目录经常有app.js, vendor.js,manifest.js,*.js.gz, *.js.map生成. 因为第三方引用模块代码通常很大,而且在不引入新的模块之前基本上是不会变动的,所以我们需要将业务代码和第三方引用模块代码分开打包,并利用浏览器的缓存去提高应用程序的首屏加载速度. 一.app.js 程序入口文件打包压缩了. 二.vendor.js 通过提取公共模块插件来提取的代码块,vendor.js最大,因为其包含了vue整

webpack打包后bundle.js文件过大的问题

由于webpack将所有的文件合并到一个js文件.因此打包后的文件过大,导致网络请求不畅. 今天尝试了一下webpack打包.结果打出来3.6M.因为之前在本地测试的原因,一直用的webpack -w的命令. 即监控入口文件有无改动,若有改动,则自动编译. 更改命令:webpack -p -w webpack -p起到压缩的作用. 结果为1.4M. 查阅了一下相关资料.果断用nginx进行gzip压缩. 进入 /usr/local/etc/nginx目录下 打开编辑nginx.conf 配置如下

性能优化 - 查看 webpack 打包后所有的依赖关系(webpack 可视化工具)

查看 webpack 打包后所有组件与组件间的依赖关系,针对多余的包文件过大, 剔除首次影响加载的效率问题进行剔除修改,本次采用的是 ==webpack-bundle-analyzer(可视化视图查看器)== == 介绍1:webpack-bundle-analyzer(可视化)== 将捆绑内容表示为方便的交互式可缩放树形图 如下效果图: 模块功能: 意识到你的文件打包压缩后中真正的内容 找出哪些模块组成最大的大小 找到错误的模块 优化它! 最好的事情是它支持缩小捆绑!它解析它们以获得实际大小的

webpack4+(打包后的文件分析+HTML插件+样式处理)

(1)打包后的文件分析 首先将打包后的文件进行适当删减,Ctrl+Shift+L可以同时选中所有相同结构内容 结构如下 (function(modules){ ... })( { ... } ) 分析可知本质为匿名函数即IIFE函数,执行时会传入后面函数执行符里的对象,接下来分析下传入对象 key指的是当前模块路径 value (2)HTML插件 (3)样式处理 . 原文地址:https://www.cnblogs.com/jianxian/p/12416586.html

webpack打包后访问不到json文件

一.问题描述 在vue中,前端写ajax假数据,用axios将json数据渲染到组件中,开发期间一切正常,webpack打包压缩后,json文件的路径错误,页面访问不到数据,导致渲染失败. 二.预期结果 能正常获取数据,渲染页面. 三.问题分析 因为webpack没有把json文件打包到dist目录,所以not found,即便加了json-loader也无用. 四.解决方案 手动把ajax数据目录拷贝到dist目录,先让页面完整出来.通常ajax数据是后端给前端一个接口地址,前端去访问的,所以

解决vue-cli webpack打包后加载资源的路径问题

vue项目,访问打包后的项目,输入路径后,页面加载空白.这时会有两类问题,都是路径问题. 1.一个是css,js,ico等文件加载不到,是目录里少了dist 打开页面时一片空白 解决办法: 前端精品教程:百度网盘下载 config/index.js文件的build->assetsPublicPath的默认值改为 './' assetsPublicPath:资源的根目录.这个是通过http服务器运行的url路径.因为webapp和static中间还有层dist,所以要用'./' 2.另一个就是单纯

create-react-app 打包后静态文件过大 webpack优化

在最近的项目里,页面和静态文件并不是很多的情况下,打包后发现产出的静态资源却很大. 1.关掉sourcemap 在config/webpack.config.js文件里,大概30几行的位置添加这样一句代码,这样做的作用是防止线上生成环境将源码一起打包部署. 2.将一些公共的库(比如antd)做一个缓存 splitChunks: { chunks: 'all', name: "vender", cacheGroups: { vender: { name: "vendor&quo

webpack打包后不能调用,改用uglifyjs打包压缩

背景: 项目基于原生js,没用到任何脚手架和框架,但也需要打包压缩. 项目的js中声明了一些全局变量 供其他js调用. 这时候如果用webpack打包,基于webpack特性,会嵌套一层大函数,会将js中的变量变成局部,不能供其他js调用. 因此弃用了webpack.选用了uglifyjs. 原因: webpack里也有用到uglifyjs的webpack版:uglifyjs-webpack-plugin. 打包途径: 打包源文件:dev文件夹下的js文件====>目标文件:js文件夹. 目录结

如何解决使用webpack打包之后,font-awsome路径不对的问题,终极解决方法

http://www.cnblogs.com/caimuqing/p/7065694.html 问题描述: 使用webpack打包vue项目,使用font-awsome字体,发现打包之后,font-awsome图标不显示,报错为路径不对 看了下打包的路径,的确路径不对,打包之后font-awsome的文件是存放在static/fonts/下的,而访问的时候static/css/static/fonts/ 原因是: build > webpack.base.conf.js 里面loader的设置