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

  • 2020 年 1 月 14 日
  • 笔记

目录

  • 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('[email protected]/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 如何快速进行业务迭代?》