听说你最近在玩vue.js？是不是在搞新的项目搞到图片路径出错了有点头疼？没事儿，我这儿有妙招解决你这个问题
图片路径错误问题的表现
说起Vue CLI3的项目，我试着就在那个Assets文件夹放个logo.png，然后再用npm运行Servr就可以了。可是折腾到最后，npm运行Build打包的时候，这个小图片居然消失得无影无踪，连个错误提示都没有，真是神神秘秘的。
造成图片路径错误问题的原因
vue.js这个框架不简单呐，全靠组件化支撑。每个组件管的事儿可多了，从最基础的HTML模板、CSS样式到强大的JavaScript代码，无论是小细节还是大块头，都做得特别精细！等程序复杂度上来，人手不够了怎么办？这时候就要靠webpack咯。想知道Webpack是怎么帮大家的？接着看下去——它会把所有组件的东东（包含外部依赖）全部弄到一个JavaScript文件里去；还有资源文件的摆放问题，也要按照HTTP请求这样的规矩来安排。也就是说，如果你使用的是相对路径引用资源文件，那么程序运行时可能会找不到图片。不过别担心，经过Webpack这么一处理，所有图片都会跑到根目录下的img文件夹中稳稳待着，超级给力！
http://your-domain.com/img/logo.4aebf758.png 404 (Not Found)
解决方案一：修改静态资源根路径
解决图片url错误超简单～就是换个地方存照片这么回事儿。只需在vue.config.js（别忘了这个文件）中改一下publicPath对应的地址就行。不管代码怎么变，都能找到你的图片哒。
解决方案二：使用绝对路径引用图片
别再纠结啥publicPath，直接上绝对路径！你上网页地址那块儿待会儿，加个斜杠，然后这斜杠后面跟着的就是我们项目的地盘。这样子搞完，图片再加载不了这种破事就难不倒我们了，保证大家看图都高清得很~
解决方案三：将图片文件放置在公共目录下
只要把图往/public文件夹里一丢就成了，这里不受webpack规范束缚喔。直接复制进去就行！这样的话，无需更改前端路径也可以随时取用图片！
module.exports = {
publicPath: './'
}
良好习惯能减少问题发生
敲代码要记得弄好路径，养成好习惯！爱用绝对路径就用呗，或者都扔到共用文件夹好了。这样调试网页会轻松很多的，省得链接出问题错位惹麻烦！
总结与展望
来告诉你们一个技巧要是你在Vue CLI 3里发现图片链接出了问题，别怕，我这儿有几个小妙招给你解决。首先试试看在代码里把乱七八糟的资源根目录给删掉看看会不会好转;实在不行的话就老老实实换上绝对路径来引用图片吧;最后一招就是把所有图片都丢到一个共享文件夹里去。学会这三招，处理Vue.js开发中遇到的小问题就游刃有余了！
搞定！告诉你们个小技巧，如果你在用vue-cli3构建项目时碰到图片路径错误的话，这个方法绝对管用！相信我，快试试~
评论0