vue-loader中的资源路径解析

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/03/11/vue-loader%E4%B8%AD%E7%9A%84%E8%B5%84%E6%BA%90%E8%B7%AF%E5%BE%84%E8%A7%A3%E6%9E%90/

摘要

本文主要讲述了：

由谁解析
vue-loader 的解析规则

正文

由谁解析

<template>中的资源路径由vue-loader进行解析
<style>中的资源路径由css-loader进行解析

示例：

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

将被vue-loader解析为

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

而后继续交给url-loader或file-loader解析。

示例：

<style>
body {
  background-image: url(../image.png);
}
</style>

将被css-loader解析，而后继续交给url-loader或file-loader解析。

vue-loader 的解析规则

vue-loader不会解析 DOM 的style属性（区分于<style>）
vue-loader不会解析data中的字符串
vue-loader会解析<img>中的src
相对于当前文件的路径必须以.开头，例如：./images/foo.png
相对于node_modules的路径必须以~开头，例如：~images/foo.png
以/打头的路径和不以.打头的路径不需要解析，例如：/images/foo.png和images/foo.png将原样输出

示例：

<template>
  <div>
    <!-- 不需要解析 -->
    <div id="foo"></div>

    <!-- 不会被vue-loader解析 -->
    <div
      style="width: 100px; height: 100px; background-image: url(./assets/logo.png)"
    ></div>

    <!-- 不会被vue-loader解析 -->
    <img :src="doNotWorkImg" />

    <!-- 不会被vue-loader解析 -->
    <div :style="doNotWorkStyleObject"></div>

    <!-- 不会被vue-loader解析，手动触发`url-loader`或`file-loader`进行解析 -->
    <div :style="styleObject"></div>

    <!-- 不会被vue-loader解析 -->
    <img src="/assets/logo.png" />

    <!-- 不会被vue-loader解析 -->
    <img src="assets/logo.png" />

    <!-- 会被vue-loader解析 -->
    <img src="./assets/logo.png" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      doNotWorkImg: './assets/logo.png',
      doNotWorkStyleObject: {
        width: '100px',
        height: '100px',
        backgroundImage: 'url(./assets/logo.png)',
      },
      styleObject: {
        width: '100px',
        height: '100px',
        backgroundImage: `url(${require('./assets/logo.png')})`,
      },
    };
  },
};
</script>

<style>
#foo {
  width: 100px;
  height: 100px;
  /* 会被css-loader解析 */
  background-image: url(./assets/logo.png);
}
</style>