質問

私は新しいvue.jsプロジェクトを始めているので、vue-cliツールを使って新しいwebpackプロジェクトをscaffold outしました（例． vue init webpack ).

生成されたファイルを見ているうちに、以下のようなインポートがあることに気づきました。 src/router/index.js ファイルを作成します。

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello' // <- this one is what my qusestion is about

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            name: 'Hello',
            component: Hello
        }
    ]
})

アットマークは見たことないですね( @ ) をパスに含めるのは初めてです。相対パスを許可しているのだと思いますが（多分）、それが本当に何をするものなのか、私が理解していることを確認したかったのです。

ネットで検索してみましたが、説明が見つかりませんでした（おそらく、"at sign"を検索したり、リテラル文字 @ は検索条件として役に立ちません)。

は何を意味するのでしょうか？ @ このパスで行うこと（ドキュメントへのリンクがあれば素晴らしい）、そしてこれはes6のことなのか？webpackのこと？vue-loaderのこと？

アップデイト

Felix Klingが、この同じ質問に関するstackoverflowの重複した質問と回答を示してくれたことに感謝します。

他のstackoverflowの投稿のコメントはこの質問に対する正確な答えではありませんが（私の場合、それはbabelプラグインではありませんでした）、それが何であるかを見つけるための正しい方向を示してくれました。

vue-cli が作成する scaffolding の中で、webpack の基本設定の一部が .vue ファイルのエイリアスをセットアップしています。

これは、srcファイルからの相対パスが得られるという点でも、意味があります。 と の必要性を排除しています。 .vue をインポートパスの末尾に追加します（通常は必要です）。

ありがとうございました。

解決方法は？

これは、Webpackを使用して行われます resolve.alias の設定オプションで、Vueに固有のものではありません。

VueのWebpackテンプレートでは を置き換えるように設定されています。 @/ で src パス :

  const path = require('path');

  ...
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      ...
      '@': path.resolve('src'),
    }
  },
  ...

として、エイリアスを使用する。

import '@/<path inside src folder>';