vue 打包以后拿不到 原先 static 文件里的 图片

vue 打包以后拿不到 原先 static 文件里的 图片

关于vue 打包是一个 困扰了不少初学者的问题，固然包括我。不过vue-cli 已经优化的很好

关于路径问题，百度上有不少，就是在

修改：

这个文件下的

  build :   {

     // Template for index.html

    index :   path . resolve ( __dirname ,   ' ../dist/index.html ' ) ,

     // Paths

    assetsRoot :   path . resolve ( __dirname ,   ' ../dist ' ) ,

    assetsSubDirectory :   ' static ',

    assetsPublicPath :   ' / ',   //   ==>  './'

确实能将打包之后的资源路径指向打包之后的文件夹。可是我使用 静态文件路径的 却拿不到

imgSrc : [

' /static/img/footer/tab11.png ' ,

' /static/img/footer/tab21.png ' ,

' /static/img/footer/tab31.png '

]

这种路径的一个算一个，都拿不到。

而后看打包之后的文件结构，发现只须要在路径变成相对路径

imgSrc : [

' . /static/img/footer/tab11.png ' ,

' ./static/img/footer/tab21.png ' ,

' ./static/img/footer/tab31.png '

]

就能拿到。

可是当我修改标签上的 static（不要问我为何要在标签上使用 static 文件里的东西，当时脑抽）

为

< img slot = " icon " src = " ./static/img/footer/tab4.png " >

结果报错了。。。打包也会报一堆错

而后想着既然这样，索性破罐子破摔，把这个改为 绑定的属性

< img slot = " icon " : src = " '. /static/img/footer/tab4.png ' " >

就能拿到了。