当Vue项目使用npm run build打包后，部署到服务器时可能出现图片、CSS路径问题。解决方法包括：1)修改config/index.js，将'/'改为'./'；2)在CSS中使用正确的相对路径。此外，assets和static目录的使用区别也会影响资源路径。正确理解这两个目录的作用有助于避免404错误。
Vue打包后访问静态资源路径问题
Vue介绍中static文件夹里放的是静态资源目录，如图片、字体等。
我们发现运行npm run start后本地图片路径是没问题的，但是打包上传后会怎么样呢？
我们知道，执行npm run build 后会生成dist文件夹，把里面的index.html在浏览器运行会发现
图片路径出错啦！！！
解决方法：
1.先找到config下的index.js文件
把最后的'/' 改为 './'
2.接着把图片地址改为
以上就是Vue打包后访问静态资源路径问题的相关知识点，感谢大家的阅读和对我们的支持。
时间： 2019-11-06
好久没更博了,最近也不知道在忙啥,反正就是感觉挺忙的,在群里看到陆陆续续有刚入vue小伙伴问vue动态加载图片总是404的状况,这篇就简单的说明为什么会出现以及解决办法有哪些. 首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src="./logo.png">和background:url(./logo.p
最低0.47元/天 解锁文章
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
