vue项目静态资源(图片,字体)引用路径正确姿势

html-css022

vue项目静态资源(图片,字体)引用路径正确姿势,第1张

首先，vue项目有两个地方可以存放静态资源。一个是assets文件夹，一个是static文件夹（地址栏输入static可以直接访问）。放到static里面webpack打包后只会把资源复制到发布目录而不会把小图片优化为base64。而assets内的资源会被webpack打包,比如图片,会被转为BASE64。为了兼顾图片资源优化，所以还是不适合把图片资源放到static。

而当我们把这些资源放入assets文件夹时，当引入的图片是背景图片时，会报错。

这个时候，还需配置 build =>util.js 里找到 ExtractTextPlugin.extract 增加一行： publicPath: '../../' ，主要解决背景图片路径的问题。

这样改动的原因是Vue打包完成的目录结构中，js/css文件与static目录的层级差了2级

解决：build->utils.js里，修改：增加

publicPath:'../../',

if

(options.extract)

{

return

ExtractTextPlugin.extract({

use:

loaders,

publicPath:'../../',

fallback:

'vue-style-loader'

})

}

else

{

return

['vue-style-loader'].concat(loaders)

}

以上这篇解决vuejs项目里css引用背景图片不能显示的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:解决vue打包之后静态资源图片失效的问题解决vue打包css文件中背景图片的路径问题详谈vue+webpack解决css引用图片打包后找不到资源文件的问题vue

cli使用绝对路径引用图片问题的解决关于Vue背景图打包之后访问路径错误问题的解决