vue项目打包时样式及背景图片路径找不到的解决方式

  

vue项目打包后,文件找得的到,但是引用的字体及背景图片找不到。

  

  

主要是需要单独为css配置publicPath。

  

ExtractTextWebpackPlugin提供了一个选择。publicPath的api,可以css为单独配置publicPath。

  

<强>对于用vue-cli生成的项目,dist目录结构如下:

  

dist
  ├──指数。html
  └──静态
  ,,├──css
  ,,├──img
  ,,└──js

  

经常遇见的问题是css中背景图像的相对路径不能正确的引用到img文件夹中。但是用ExtractTextWebpackPlugin的publicPath配置就可以。

  

<强>更改构建/跑龙套。js文件中ExtractTextPlugin插件的选择配置:

        如果(options.extract) {   返回ExtractTextPlugin.extract ({   用途:装载机、   publicPath:“. ./. ./,//注意配置这一部分,根据目录结构自由调整   回退:“vue-style-loader”   })   其他}{   返回(“vue-style-loader”) .concat(加载器)   }      

以上这篇vue项目打包时样式及背景图片路径找不到的解决方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

vue项目打包时样式及背景图片路径找不到的解决方式