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

原创

LIYI

修改于 2020-01-03 17:53:55

9760

修改于 2020-01-03 17:53:55

文章被收录于专栏：艺述论专栏艺述论专栏

资源加载
- 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>

url是css语法，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 url与url路径的转换控制。

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',
              },
            ],
        },
      ]
    }
  },