专栏首页艺述思维vue 开发常用工具及配置七:处理资源加载问题

vue 开发常用工具及配置七:处理资源加载问题

目录

  • 1 资源加载
    • 1.1 处理 img.src 这样的资源属性
    • 1.2 在内嵌样式中 background-image 如何加载
    • 1.3 在样式块中 background-image 如何加载
  • 2 与资源加载有关的两个加载器
    • 2.1 url-loader
    • 2.2 file-loader
  • 3 关于如何选择优先在哪里配置的问题
  • 源码

1 资源加载

1.1 处理 img.src 这样的资源属性

Vue Loader 编译单文件组件中的 <template> 块时,它也会将所有遇到的资源 URL 转换为 webpack 模块请求。

例如,下面的模板代码片段:

<img src="../image.png">

将会被编译成为:

createElement('img', {
  attrs: {
    src: require('../image.png')
  }
})

require('../image.png') 这是一个模块的请求了。

除了 img.src 还有哪些标签的属性,会自动转为模块请求,这是由 Vue Loader 模块的 transformAssetUrls 定义的。

transformAssetUrls 默认值为:

{
  video: ['src', 'poster'],
  source: 'src',
  img: 'src',
  image: ['xlink:href', 'href'],
  use: ['xlink:href', 'href']
}

由于有编译时模块的自动转换,所以下面三行代码的组件效果是一致的:

<img src="../assets/logo.svg"/>
<img src="@/assets/logo.svg"/>
<img :src="require('../assets/logo.svg')"/>

第二行可以@符号,因为vue.config.js有关于别名的配置,@相当于src

运行效果:

1.2 在内嵌样式中 background-image 如何加载

style内联样式中直接引用资源是不行的:

<div style="background-image:url('@/assets/logo.svg')"></div>

urlcss语法,background-image属性也不在vue-loader插件的自动转换匹配之列。

有人是写一个data变量,但如果这个变量仅是此处使用一次,声明反而迂腐了。可以直接使用require关键字实现:

<div :style="{backgroundImage:'url('+require('@/assets/logo.svg')+')'}"></div>

1.3 在样式块中 background-image 如何加载

这是在template中的方法,因为可以直接使用require关键字,如果是在样式文件或在style代码块内呢,此时require关键字不得使用?

如果这样使用:

<style lang="less" scoped>
.button1{
  background-image:url('@/assets/logo.svg')
}

</style>

是不行的,程序会报编译错误。但如果这样使用:

.button1{
  background-image:url('~@/assets/logo.svg');
}

就可以了。仅在路径前端加一个~符号。在style block内可以使用,在独立的 style file中相信也可以使用。

资源 URL 转换会遵循如下规则:

1,如果路径以 @ 开头,会被看作模块依赖,将启用插件加载资源。这时候在 webpack 配置中给 @ 配置 alias,就很有用了。

2,如果路径以 ~ 开头,其后的部分将会被看作模块依赖。

3,如果路径以 . 开头,将会被看作相对的模块依赖。

4,如果路径是绝对路径,例如 /images/foo.png,会原样保留。

2 与资源加载有关的两个加载器

file-loader用于实现文件加载,url-loader用于实现data urlurl路径的转换控制。

2.1 url-loader

url-loader works like file-loader, but can return a DataURL if the file is smaller than a byte limit.

如果图片大小小于某值,直接以data url形式内嵌于html标签内。在vue.config.js文件中的样例配置为:

configureWebpack: {
    ...
    module:{
      rules:[
        {
          test: /\.(png|jpg|gif)$/i,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 8192,
              },
            },
          ],
        },
      ]
    }
  },

如果不想使用data url这种形式,可以将值改小。

2.2 file-loader

该插件让import、require发挥作用。在vue.config.js文件中的典型配置为:

configureWebpack: {
    ...
    module:{
      rules:[
        {
            test: /\.(png|jpe?g|gif)$/i,
            use: [
              {
                loader: 'file-loader',
              },
            ],
        },
      ]
    }
  },

3 关于如何选择优先在哪里配置的问题

除了常规配置,深度配置 webpack 有两种方式:

configureWebpack

该节点可以是对象也可以是函数。如果这个值是一个对象,则会通过 webpack-merge 合并到最终的配置中。这是优先选用它的原因。

chainWebpack

这是一个函数,会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。

对于 CSS 相关 loader 来说,我们推荐使用 css.loaderOptions 而不是直接链式指定 loader。这是因为每种 CSS 文件类型都有多个规则,而 css.loaderOptions 可以确保你通过一个地方影响所有的规则。

所以对于之前关于 less 全局变量的实现,有两种方式,以第二种在 css.loaderOptions 中设置为佳。

源码

https://git.code.tencent.com/shiqiaomarong/vue-go-rapiddev-example/tags/v20200103

参考链接

  • https://vue-loader.vuejs.org/zh/options.html#transformasseturls
  • https://github.com/webpack-contrib/file-loader
  • https://github.com/webpack-contrib/url-loader

《基于 vue+go 如何快速进行业务迭代?》

本文分享自微信公众号 - 用故事讲技术(ygsjjs),作者:石桥码农

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-01-03

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue 开发常用工具及配置七:处理资源加载问题

    当 Vue Loader 编译单文件组件中的 <template> 块时,它也会将所有遇到的资源 URL 转换为 webpack 模块请求。

    李艺
  • 声明式渲染与 data 函数

    这是学习vue开发,必先了解的第一个特征。如前已经实现的App.vue组件,已经包括声明式渲染:

    李艺
  • 石桥码农:小程序 6 个 UI 框架体验感受

    李艺
  • vue 开发常用工具及配置七:处理资源加载问题

    当 Vue Loader 编译单文件组件中的 <template> 块时,它也会将所有遇到的资源 URL 转换为 webpack 模块请求。

    李艺
  • SCF: “灰常”简单的车牌识别API制作

    本文的真正目的,并不是说要做一个完善的车牌识别工具,主要就是说想要通过简单的一些package组合(包括深度学习框架等在哪),实现一个简单的对外接口,用来进行车...

    Dfounderliu
  • 漫画,看我是如何给一年级小学生讲游戏开发的!(真实案例)

    最近公众号来了一些新伙伴,向晓衡询问道:原来学 Java、前端或 Python 的,想学习 Cocos Creator 游戏开发方便难吗?

    张晓衡
  • Valine如何添加多个表情

    如果你使用的主题与我是同款主题,那么只需要将我提供的链接复制并粘贴到valine.json里(注意自己打上一对{}表情信息放括号里)即可。例如:

    Dreamy.TZK
  • Linux下安装JDK 配置环境变量

    https://www.cnblogs.com/yuanqiangfei/p/10232148.html

    包子388321
  • 魔性派对游戏《马赛克别闹》即将登陆PSVR

    VRPinea
  • 如何优雅的设计 Java 异常

    正如我们所知道的,java中的异常的超类是java.lang.Throwable(后文省略为Throwable),它有两个比较重要的子类,java.lang.E...

    三哥

扫码关注云+社区

领取腾讯云代金券