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 条评论
登录 后参与评论

相关文章

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

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

27730
来自专栏Debian社区

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

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

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

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

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

38750
来自专栏林欣哲

搭建移动端的跨平台开发环境

适用范围 大部分情况下均可用React Native一套代码跑两个平台,比如信息展示和交互等等。 如果涉及到手机设备如摄像头、定位、地图等,则要么封装原生代码给...

36780
来自专栏智能合约

centos之SSH安装

32430
来自专栏自动化测试实战

用fiddler设置手机代理

1.8K50
来自专栏Android干货

Android Studio 之 注释模板

58170
来自专栏后端技术探索

nginx 授权资源跨站访问

最近一h5前端同事反馈说某个字体库连接(类似于http://www.example.com/test.ttf)无法访问。

11120
来自专栏张善友的专栏

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

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

46290
来自专栏沈唁志

在Ubuntu 14.04上安装Zimbra开源版

Zimbra是一个完整的邮件服务器,它提供配置的Postfix与OpenDKIM,Amavis,ClamAV和Nginx,准备处理一个或多个域的邮件。Linod...

82510

扫码关注云+社区

领取腾讯云代金券