vue 生产包 背景图片-background图片不显示
Posted shine-lovely
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 生产包 背景图片-background图片不显示相关的知识,希望对你有一定的参考价值。
vue生产包:
css放在一个文件下,图片在img文件夹下
通常我们使用img标签引入文件,npm run build 打包后 ,因为img为html标签,打包后他的路径是由index.html开始访问的,他走static/img/‘图片名‘是能正确访问到图片的
而我们写在css background:url(../xxx/)引入的图片 ,这时打包后他的路径是从static/img/’图片名’是访问错误的,因为在css目录下并没有static目录。所以此时需要先回退两层到根节点处才可以正确获取到图片。
打开build/utils.js publicPath改为 publicPath:‘../../‘,
function generateLoaders (loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] if (loader) { loaders.push({ loader: loader + ‘-loader‘, options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) } // Extract CSS when that option is specified // (which is the case during production build) if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath:‘../../‘, fallback: ‘vue-style-loader‘ }) } else { return [‘vue-style-loader‘].concat(loaders) } }
以上是关于vue 生产包 背景图片-background图片不显示的主要内容,如果未能解决你的问题,请参考以下文章
vue2使用background-image设置背景图片不显示 解决
vue 背景图片 backgroundImage background-image vue的style方式绑定行内样式-background-image的方式等~