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

最新推荐文章于 2025-05-09 19:01:02 发布

遗忘ぶ恋风ぎ

最新推荐文章于 2025-05-09 19:01:02 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： vue css webpack

本文链接：https://blog.csdn.net/u012963469/article/details/115671752

在Vue项目中，经过npm run build打包后，css文件引用的静态资源（如字体文件）出现路径错误。分析发现是由于ExtractTextPlugin插件在抽离css时未正确转换资源路径，导致字体文件路径多了两层"/static/css"。解决方案是在css loader配置中，为ExtractTextPlugin的extract方法添加publicPath参数，设置为'…/…/'，即从app.css到index.html的相对路径。经过此修改，打包后的app.css文件中字体路径正确，页面显示正常。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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文件时没有转换资源引入路径导致的。