前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue-cli静态资源处理

vue-cli静态资源处理

作者头像
用户2038589
发布2018-09-06 15:38:47
1.7K0
发布2018-09-06 15:38:47
举报
文章被收录于专栏:青青天空树青青天空树

  vue-cli是利用webpack进行打包部署,其中静态资源的路径问题是一个比较麻烦的部分。

  项目中共有两个存放静态文件的地方。

  • /static 根目录下的static文件夹
  • assets src目录下资源文件夹

  /static 目录不会被webpack处理,build后复制到disk目录下,所以.vue中使用/static绝对目录引用的不会被webpack处理。

  在组件中使用assets中的静态文件,通常有两种形式的引用:

    1.img标签引用  <img src='./assets/logo.png'/>

    2.background背景图片引用 background:url(./assets/logo.png');

  webpack在处理.vue时会搜索这两类引用,处理方式稍有不同。

  首先判断是否是绝对路径开头,如果是两种都不作处理,如果为相对路径先搜索该路径是否能在src中找到,如找到并且文件较小将被转为base64格式,如较大将重命名文件并将文件复制到static/img目录下(./assets/pic.png变为/static/img/pic.3472138.jpg);  如果找不到,img将不做处理原样输出,但是background背景图会报错。

  如果想要打包输出的内容可在相对目录中访问可修改config/index.js中的

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-03-12 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档