Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十二)打包项目图片等资源的处理

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十二)打包项目图片等资源的处理

前情回顾

在《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十)打包项目并发布到子目录》章节中,我们讲解了项目打包,默认,是打包在根目录下面的。当然,我们可以通过设置,打包到任意子目录中去。

但是,我们之前的项目是没有引入资源的。比如,引入图片资源,js资源,或者字体图标之类的。那么各位可能在这个中间又会踩坑,所以,我再写一篇博客,专门来说说这个问题。

在 vue 文件中,引用图片

例如,我们将一张图片放到资源目录 /static/image/lyf.jpg 我们在 vue 文件中用下面的代码来使用这张图片。

<img src="static/image/lyf.jpg" alt="刘亦菲">

注意,最前面不要加 / 如果是这样操作的话,会变成相对根目录调用图片。如果你的项目要打包到子目录的话,这样做就会出现问题。

在 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' 这样的路径方式来调用图片。

字体图标,js 文件等,都是这样的路数。不在赘述。

好,大概就是这样,我已经在 github 新增了这部分演示内容,大家可以前往: https://github.com/fengcms/vue-demo-cnodejs 查看

如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的博文,以避免误人子弟。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏木子昭的博客

chrono 让Chrome下载资源更容易

众所周知, chrome原生的下载功能并不好用, 以查看下载任务为例, 我们需要点击两次(点击右上角 三个点 , 点击下载内容) 才能查看当前的任务

1012
来自专栏专注数据中心高性能网络技术研发

ubuntu17.04新安装之后的软件准备

以下是亲自试验可用的 1.最简化安装ubuntu17.04之后,没有安装wifi驱动。   此时可以先添加一些软件源   网易源地址: deb http://m...

3495
来自专栏Jerry的SAP技术分享

webpack打包过程如何调试?

本文适用于已经会使用webpack的前端开发人员,但是想进一步了解webpack细节和进阶。

2053
来自专栏晨星先生的自留地

漏洞分析| Humax WiFi路由器多个漏洞可获取管理员权限

2193
来自专栏FreeBuf

WordPress插件Google Analytics by Yoast存储型XSS漏洞(含POC)

WordPress著名插件Google Analytics by Yoast插件中曝出存储型XSS漏洞,该漏洞能够让未被授权的攻击者在WordPress管理面板...

24510
来自专栏技术墨客

构建用于生产的React静态化单页面服务 原

React 作为一项热门的前端开发技术,现在使用它的团队越来越多。之前也介绍了react 的所有的特性,但是仅仅了解怎么开发 react 只走了万里长征的第一步...

4734
来自专栏Debian社区

十条关于 WordPress 安全性的小贴士

WordPress 本质上并没大家认为的那么危险,而且开发者也在努力工作,以确保危险漏洞能被快速修复。但不幸的是,WordPress 的成功使其成为众矢之的:如...

763
来自专栏张善友的专栏

使用密码记录工具keepass来保存密码

在第一章,曾经给过您建议,密码不要保存在文档中,那样不安全,如果密码很多而且又很复杂,人的大脑是不可能很容易记住的,只能记录下来,如果不能记在文档中那记在哪里呢...

3899
来自专栏乐百川的学习频道

配置和美化OpenSuse Tumbleweed

在我的前一篇文章在虚拟机安装OpenSuse Tumbleweed中,介绍了如何在虚拟机中安装OpenSuse Tumbleweed。但是虚拟机上面并不过瘾,正...

3469
来自专栏Android干货

Android Studio 之 注释模板

4387

扫码关注云+社区