prod环境publicPath为相对路径时,css中引用的url路径错误

html-css011

prod环境publicPath为相对路径时,css中引用的url路径错误,第1张

更改config/index.js配置文件build.assetsPublicPath为 './'

在App.vue的 <style>中加一个background: url('./asssets/images/xxx.png')之类相对路径引用的样式

此时进行打包命令

你会发现提取出来的 css 中 url() 中图片的路径是 static/img/xxx.png 这样的,用浏览器打开index.html将会有 xxxxxxx/static/css/static/img/xxx.png 这个图片 404 的报错

主要是需要单独为 css 配置 publicPath ,更改 build/utils.js 文件中 ExtractTextPlugin 插件的 options 配置:

做项目的时候,突然发现一个容易犯错的问题

1、webpack中对css文件的处理使用的是: MiniCSSExtractPlugin、css-loader、post-loader。

2、在plugins中也相对应的设置一个MiniCssExtractPlugin,打包后将css文件单独抽离到了css文件夹下

3、打包后的目录

4、打包后的css里面的url

6、再次打包,url引入正确

很简单,但是如果不注意,还真的很容易掉坑里!!