项目打包, 默认是打包在根目录下面的. 当然我们可以通过设置, 打包到任意子目录中去. 但是, 当项目中引入资源的, 比如: 引入图片资源, js 资源, 或者字体图标之类的. 那么可能在这个中间又会踩坑.
1, 在 vue 文件引入图片
例如, 我们将一张图片放到资源目录
/static/image/lyf.jpg
我们在 vue 文件中用下面的代码来使用这张图片.
<img src="static/image/lyf.jpg" alt="">
注意, 最前面不要加 / , 如果是这样操作的话, 会变成相对根目录调用图片. 如果你的项目要打包到子目录的话, 这样做就会出现问题.
2, 在 CSS 文件中, 引用图片的处理
还是上面那张图片, 我们需要在 css 中来引用, 如何来写呢?
- .love {
- background-image: url('../static/image/lyf.jpg');
- }
这里为什么要加上 ../ 呢?
如果是最终打包到根目录的话, 可以使用 / 这种路径. 这个是完全可以理解的.
但, 如果是打包到子目录, 我们必须看下生成的最终路径:
- index.html
- static
- css
- app.a7a745952a8ca7f8c9413d53b431b8c8.css
- image
- lyf.jpg
- img
- lyf.9125a01.jpg
- js
app.39ccc604caeb34166b49.js
manifest.b1ad113c36e077a9b54d.js
vendor.0b8d67613e49db91b787.js
如上, 我们可以看到这个 css 相对 图片 的路径的地址.
你要疑问了, 这样的相对路径, 我们可以使用 ../image/lyf.jpg 来进行调用呀. 嗯, 看上去可以, 但是, 如果是这样的话, 在开发模式中又会出错了.
所以, 还是要用
'../static/image/lyf.jpg'
这样的路径方式来调用图片.
来源: http://www.bubuko.com/infodetail-2570612.html