vueでのパス記述の導入

1. パス。/

./現在のファイルと同じレベルのディレクトリ

2. パス…/

.../現在のファイルの 1 レベル上のディレクトリ

3.@記号

@ の機能は、モジュールを導入するときに、/src ディレクトリの代わりに @ を使用して、エラーが発生しやすい相対パスを回避できることです。

Vueで使用される

1. vue.config.js 設定ファイルで使用されます

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

2. @ は src ディレクトリを表します

例: (src/views/pmp/setLarge/index.vue) ファイルに画像 (src/assets/setLarge.png) を導入したい場合、通常は (…/…/…/…/src/assets) が必要です。 /setLarge.png) ですが、設定する場合は次のように短縮できます (src/assets/setLarge.png)

vueのプロジェクトパスが@を使用する理由

@ は webpack によって設定されたパスのエイリアスです

vue プロジェクトでは、ファイルまたはコンポーネントを導入し、それらを参照するときに @ 記号を使用します。

これはwebpackのエイリアスaliasを使用しているため

build/webpack.base.conf.js で設定されたエイリアス:

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

デフォルトでは、src ディレクトリを指す「@」エイリアスがあり、カスタム エイリアスを追加することもできます。

 

使用するシーン

1. js。これも最も一般的に使用される使用シナリオです。

2. cssを使用する場合は、文字列として記述せず、~を追加する必要があります

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

3.html、~を追加してもしなくても構いません。

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