Introduction of path description in vue

1. Path./

./Directory at the same level as the current file

2. Path…/

.../Directory one level above the current file

3. @ symbol

The function of @ is that when you introduce a module, you can use @ instead of the /src directory to avoid error-prone relative paths.

Used in Vue

1. Used in vue.config.js configuration file

  chainWebpack(config) {
   config.resolve.alias
     .set('@', resolve('src'))
     .set('assets', resolve('src/assets'))
     .set('utils', resolve('src/utils'));
  },

2. @ represents the src directory

For example: you want to introduce the image (src/assets/setLarge.png) in the (src/views/pmp/setLarge/index.vue) file. Normally you need (…/…/…/…/src/assets /setLarge.png), but if you configure it, you can abbreviate it like this (src/assets/setLarge.png)

The reason why vue project path uses @

@ is the path alias set by webpack

In the vue project, we will introduce files or components, and use the @ symbol when referencing them.

Because this uses webpack's alias alias

Aliases configured in build/webpack.base.conf.js:

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),
  }
}

By default there will be an '@' alias, pointing to the src directory, and custom aliases can also be added.

 

scenes to be used

1. js, which is also the most commonly used usage scenario.

2. css, you need to add ~ when using it, and do not write it as a string

{
    background: url(~@/static/img/order.jpg);
}

3. html, ~ can be added or not.

<img class="icon" src="@/static/phone.png" alt="绑定手机">
<img class="icon" src="~@/static/phone.png" alt="绑定手机">