webpack：别名在 HTML 标签中不起作用

Question

以下别名在 HTML 标签中不起作用或在 JavaScript 中不起作用是否有任何原因？

在我的 webpack 配置文件中：

  resolve: {
    alias: {
      '~': path.resolve(__dirname, './src/')
    }
  },
 ...
 ...
 ...

 {
    test: /\.(png|svg|jpg|gif|ico)$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          outputPath: 'images',
          esModule: false,
          name: '../assets/images/[name].[ext]'
        },
      },
    ]
 },
 {
   test: /\.(html)$/,
   use: ['html-loader']
 }

在我的 HTML 文件 (.vue) 中：

// .vue
// Does not work
<template>
  <p><img src="~/assets/images/sample.jpg"></p>
</template>

// Ok
<script>
import Image from '~/assets/images/sample.jpg'
</script>

我的 webpack 配置中是否遗漏了什么？

Answer 1

vue-html-loader和css-loader实际上是在这种情况下使用。

你可以试试这个：

<img class="logo" src="~assets/images/sample.jpg">

或

<template>
  <div>
    <img :src="sample" />
  </div>
</template>

<script>
import image from '~/assets/images/sample.jpg';

export default {
    data() {
        sample: image;
    }
}
</script>

webpack：别名在 HTML 标签中不起作用

webpack: alias does not work in HTML tags

webpack

webpack-file-loader

webpack-html-loader