使用vue-cli开发的项目,编译过后在本地打开常常会出现找不到css文件,或者找不到在css中使用background-image定义的背景图片,打开项目会发现是路径出现了错误。
这时我们需要为css文件单独配置publicPath参数。
第一步,找到在config文件夹中的index.js文件,里面有一个build对象,将其中assetsPublicPath的配置从 '/’ 改为 './',这已经可以解决找不到css资源或者js资源的问题。
这时会发现使用background-image定义的背景图片任然有问题。
第二步:找到build文件夹中的utils.js文件,里面对外抛出了一个cssLoaders函数,该函数中定义了一个generateLoaders函数,这个函数中使用了ExtractTextWebpackPlugin来配置解析css的loader,原始的状态是这样的:
这时再配置一下publicPath:
这个时候就已经解决了找不到css文件或者找不到background-image定义的背景图的问题。
注意:publicPath:‘../../’,适用在.vue格式文件的style标签中使用的样式,在开发中需要根据你自己的文件结构,动态配置,在这就不过多赘述。
tips:毕业2年来,也从事了2年的前端工作,这是我2年来第一次写东西,想着尝试把自己一些心得分享出来,可能说的啰嗦,繁琐,请见谅啦,有错误的地方欢迎指正,希望和大家一起进步!!