Summary of the problem of referencing file paths in vue

The vue path is divided into:

Absolute path, relative path, ~+ path and alias+ path

Absolute path:

(1) Content placed in the public folder will not be processed through webpack and can be directly referenced.

For example: put it directly in the public folder, no matter which file it is in, you can reference it like this

<img src="" style="width: 200px; height: 200px" />

(2) Quote by alias

In js, introducing a file path with an alias does not need to be added before the alias. The path introduced in css or style needs to be added before the path, and the path starts with ~. The subsequent part will be regarded as module dependencies. This means that you can use this feature to reference a resource in a Node dependency, ~ equivalent to requirement.

Defined alias in
    chainWebpack: (config) =&gt; {
        
            .set('@', resolve('src'))  //The alias of this project path src path is @            .set('_conf', resolve('src/config')) //The alias of this project path src/config path is set to _conf            .set('_iconfont', resolve('src/assets/icons/iconfont'))
            .set('_css', resolve('src/assets/css/'))
            .set('_img', resolve('src/assets/img/'))
            .set('_js', resolve('src/assets/js/'))
            .set('_components', resolve('src/components'))
            .set('_header', 'src/Header')
            .set('_footer', 'src/Footer')
    }
existvueIntroducedjsFiles andcssdocument
NoticeexistscriptThere is no front of the path~
&lt;script&gt;
import index from "_js/";                 ==src/assets/js/
import "swiper/";                   ==node_modules/swiper/
import "_js/vendor/swiper/";  ==src/assets/js/vendor/swiper/
&lt;/script&gt;
NoticestyleThe path using alias needs to be added before~ 
&lt;style scoped&gt;
@import url(~_css/);     ==src/assets/css/
&lt;/style&gt;

Relative path:

Introduce relative paths, require before the path

existsrc/view/home/Introducedsrc/assets/img/ 
Correct writing：
&lt;img  src="require(../../assets/img/)" /&gt;
Wrong writing：
&lt;img src="../../assets/img/" /&gt;
reason：Apart frompublicContents under the folder，The rest of the content will passwebpackdeal with，The path changes，So need to userequiredeal with一下路径

~+path and alias+path

The following example introduces a file by alias

Set by aliasdivBackground picture
usereqiure，This way you can write
&lt;div    class="thumbnail"
        v-bind:style=
"{backgroundImage:'url(' +require('_img/index/') +')',}"
   &gt;
use~，This won't work：
&lt;div     class="thumbnail"
         v-bind:style=
"{backgroundImage:'url(~_img/index/)',}"
&gt;

Givedivset upstylestyle，set up背景图片等属性
&lt;div
        class="featurette"
        :style="[
          {
            background:
              'url(' +
              require('_img/index/') +
              ' )  bottom center no-repeat',
          },
          {
            'background-size': 'auto 100%',
          },
          {
            'margin-bottom': '50px',
          },
        ]"
      &gt;
&lt;/div&gt;

Introduce pictures by alias
&lt;img src="~_img/index/" alt="" /&gt;

Introduced by aliascss
&lt;style scoped&gt;
 @import url("~_css/"); 
&lt;/style&gt;

Introduced by aliasjs
&lt;script&gt;
import index from "_js/";
import Swiper from "swiper";
import "swiper/"; //The heel is oppositeimport "_js/vendor/swiper/";
&lt;/script&gt;

This is the article about the issue of citing file paths in vue. For more related contents of citing file paths in vue, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!