Detailed explanation of examples of using alias paths to reference static image addresses in webpack+vue

Everyone knows the benefits of aliases in webpack, but in vue templates, problems always arise when using aliases for image addresses. For a long time, no solution was found. I thought it was because of webpack. This article mainly introduces the use of alias paths in webpack+vue to reference static image addresses. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to have a look, I hope it helps everyone.

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

<template>
 <img src="assets/images/logo.jpg" />
</template>
<script>
import &#39;assets/css/style.css&#39;
</script>
<style>
.logo {
 background: url(asset/images/bg.jpg)
}
</style>

In the above code, you will find that only the introduction of style.css is successful, and the image address and background image address will be resolved. Failure...

After various searches to find the reason (at this time, you will find that Baidu search for these technical contents is really a fighter among garbage), and finally found the reason...

vue-html-loader and css-loader translates non-root URLs to relative paths. In order to treat it like a module path, prefix it with ~

is to alias Add a ~

in front and the final code is written as:

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

<template>
 <img src="~assets/images/logo.jpg" />
</template>
<script>
import &#39;assets/css/style.css&#39;
</script>
<style>
.logo {
 background: url(~asset/images/bg.jpg)
}
</style>

means: tell the loader that it is a module , instead of a relative path

Note: Only the static file address in the template and the static file address in the style need to be added ~, in the script, write whatever the alias is defined as.
This is it , I have been struggling with the problem for several months, and finally solved it...

By the way, I will post the list of aliases I use:

alias: {
  'assets': path.resolve(__dirname, '../src/assets'),
  'src': path.resolve(__dirname, '../src'),
  '~api': path.resolve(__dirname, '../src/api'),
  '~components': path.resolve(__dirname, '../src/components'),
  '~pages': path.resolve(__dirname, '../src/pages'),
  '~router': path.resolve(__dirname, '../src/router'),
  '~store': path.resolve(__dirname, '../src/store'),
  '~utils': path.resolve(__dirname, '../src/utils')
}

Related recommendations:

PHP regular code example for obtaining all image addresses on the page

Summary and sharing of regular expression methods for processing image addresses and img tags

How to replace the image address (img src) in a string with JavaScript regular expression

The above is the detailed content of Detailed explanation of examples of using alias paths to reference static image addresses in webpack+vue. For more information, please follow other related articles on the PHP Chinese website!