Vue中文件路径绑定与assets、static两个文件夹的关系

在Vue的开发中经常碰到需要动态绑定文件路径的需求，如：一个img的src属性绑定url变量，但是绑定完后图片却不显示。许多情况下是因为没有弄清楚文件存放的位置而引起的错误，在此做个记录。

常见的文件存放位置有assets、static这两个文件夹。网上对于这两个文件夹的区别解释有很多，我摘抄了一个说法：assets文件是src下的，所以最后运行时需要进行打包，而static文件不需要打包就直接放在最终的文件中了。

简单来说存在assets下的文件在打包时会重新“编码”，你在程序中写的路径地址会和文件最后存放的路径地址有所不同，造成图片无法显示。而在static下的文件路径地址不会改变，图片能直接显示。

综上

如果文件放在assets文件夹下，需要传入图片编码，例：

imgUrl = require('./assets/demo.jpg')

如果文件放在static文件夹下，则直接写路径即可，例：

imgUrl = '/static/demo.jpg'