问题: (vue.js)vue-cli 打包之后图片引用路径;
描述:
这是我的组件的路径;
./src/components/home目录下;
图片的路径:
./static/img目录下;
当我在开发的时候,引用图片的时候路径需要这样写(home组件中引用图片):
我需要回退两个路径才可可以访问到./static/img下的图片;
问题:
当我npm run build 之后;生成的html中;home组件引用的图片路径也会回退两个路径;这样就报错了;
打包之后的图片地址不用回退两个路径,因为他们就在./static/img目录下,html文件和static是同级目录;
栗子:
这是我在home文件中引用的背景图片的地址:
右键在新网页打开图片的路径:
beta/static/css/static/img/.jpg
正确的路径应该是:
beta/static/img/.jpg;
这里被加上了/static/css,不知道怎么回事。
webpack的配置中:
这个是怎么打包的。。。。
解决方案1:
把你的图片资源放到static文件下,不论你是在vue文件中,还是在css文件中都这样使用:
![](/static/img/...)
background:url('/static/img/...)
这样打包之后就不会出现图片路径错误了,否则vue-cli不会给你一个static文件夹啊,是不是