vue静态资源打包中的坑与解决方案

1、问题
vue 经过 npm run build 打包后生成的css文件引入的静态文件（我的项目中是引入了字体文件）路径错误问题。

2、分析
查看项目中字体文件的引入路径为http://192.168.120.37/lx_form/static/css/static/fonts/element-icons.535877f.woff
而项目中的资源路径如下

index.html
static/|--js/|--*.js|--css/|--*.css|--fonts/|--*.woff|--*.ttf

对比项目中的资源路径，很明显字体文件引入的路径有误，分析后可以知道，字体文件的引入路径多了两层"/static/css"的目录。

因为打包配置的assetsPublicPath是"./"，即静态资源使用的是相对路径，所以css目录下的css文件引入的字体文件的路径应该为相对于项目根目录的static/fonts/element-icons.535877f.woff，经查看，确实如此。

那么css文件路径有问题，猜测是打包过程中资源路径没有配置好，分析打包过程，css是在js中引入的或是写在.vue文件中的，css文件首先被less，postcss等css预处理器处理，处理后被ExtractTextPlugin插件处理，ExtractTextPlugin插件将js中或.vue文件中的css全部抽离至app.css文件中。

因为字体文件的引入路径多了两层"/static/css"的目录，所以在抽离app.css文件时，css文件中引用的路径是相对于app.css目录的static/fonts/element-icons.535877f.woff的静态资源，该路径相对 index.html 的路径为：static/css/static/fonts/element-icons.535877f.woff。

所以最终确定问题是ExtractTextPlugin插件抽离css文件时没有转换资源引入路径导致的。

3、解决
查询ExtractTextPlugin插件的使用方法，发现ExtractTextPlugin的extract可以通过添加publicPath参数来改变静态资源路径，所以css的loader处理过程中，如果配置的参数中设置了extract为true时，ExtractTextPlugin插件添加publicPath参数，值为’…/…/’，是打包后的 app.css文件至index.html文件的相对路径，代码如下：

if (options.extract) {return ExtractTextPlugin.extract({use: loaders,fallback: 'vue-style-loader',publicPath: '../../'})
}

修改后打包并部署到服务器上，访问相关页面，一切正常，字体文件也能正常引入，查看app.css文件中的字体引入路径为：…/…/static/fonts/element-icons.535877f.woff。

vue静态资源打包中的坑与解决方案相关推荐

详解vue静态资源打包中的坑与解决方案
详解vue静态资源打包中的坑与解决方案参考文章: (1)详解vue静态资源打包中的坑与解决方案 (2)https://www.cnblogs.com/goloving/p/8904545.html ...
超链接静态资源下载中 download属性无效解决方案
一般的,前端对后台的返回的静态数据链接下载是,可以通过动态生成a标签,并给对应标签上的download属性赋值,下载下来的文件就会以download的参数为文件名: 但是,如果是对CDN的链接数据进行 ...
一篇弄懂webpack静态资源打包器
认识 webpack是优秀的前端构建工具,静态资源打包器,可以根据模块依赖关系进行静态资源分析,快速打包生成相对应浏览器可以直接识别的静态资源! 环境 1)node环境 2)vs code编辑器规约 ...
vue 静态资源文件夹src下的assets 和static的区别
static下的静态资源在项目打包的时候,直接在dist文件夹下直接把static文件夹打包进去 src下的assets,在打包时,vue是按照模块来引入里面的静态资源,一般使用这种方式转载于:ht ...
关于使用NodeJS+Express搭建服务器访问静态资源的一些填坑经验
前言 NodeJs是一个能让前端开发工程师变成全栈工程师的神器.最近在搞一个私活,需要上传图片到服务器存储.按照以前的想法,是用Java写代码搭服务器.奈何,大学毕业后就一直在搞前端和安卓开发.Jav ...
Vue静态资源之public文件
前言今天在看公司项目代码时,发现了一个比较有趣的动画,审查元素才发现是一个gif动图,查看相关代码发现图片路径写的是../../../xxx/xxx.gif于是我按照之前的习惯向上找三级,找了半天没 ...
vue中静态资源文件中的图片element.style.backgroundImage设置url无效问题
静态文件中的图片直接通过以下这种方式是无效的 element.style.backgroundImage = 'url("@/assets/img/btn_checkbox_nor@2x.p ...
在Vue 项目 webpack 打包中关于背景图片的路径问题
第一次发segmentfault ,记录一下关于最近生产环境,开发环境路径问题. 开发环境下我们可以在vue中引入相对路径,但在生产环境,会默认为根目录static,所以我们需要在config 目录下 ...
Vue静态资源的获取
错误写法1:(没有用require) this.my_pic = './static/fruit/apple.png'; 上面的写法会导致图片无法渲染错误写法2:(require不支持"纯 ...
APP+后台+vue前端全套打包送，电商解决方案CRMEB开源啦
CRMEB是一套网上购物商城系统,其中包括java + vue + uniapp,也就是说pc后台管理系统的前后台+APP全套源码全部提供.其中项目有php版本与java版本.本文着重讲解java版本 ...

vue静态资源打包中的坑与解决方案

vue静态资源打包中的坑与解决方案相关推荐

最新文章

热门文章