私は新しいvue.jsプロジェクトを開始しているので、vue-cliツールを使用して、新しいWebpackプロジェクト（つまり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
        }
    ]
})

これまでに@パスのアットマーク（）を見たことがない。私はそれが相対パスを許可しているのではないかと思っています（たぶん？）。

オンラインで検索してみましたが、説明が見つかりませんでした（ "アットマーク"を検索するか、リテラル文字を使用し@ても検索条件として役に立たないためです）。

@このパスでは何をしますか（ドキュメントへのリンクは素晴らしいでしょう）、これはes6のものですか？ウェブパックのこと？ビューローダーのこと？

更新

Felix Klingに、この同じ質問について別の重複したStackoverflow質問/回答を教えてくれてありがとう。

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

vue-cliがクランクアウトする足場で、基本のwebpack構成の一部が.vueファイルのエイリアスを設定します。

これますが、それはあなたのsrcファイルからの相対パスを与えるという事実の両方を感知し、それがの要件を削除.vueします（通常は必要）インポートパスの最後に。

助けてくれてありがとう！

これはWebpack resolve.alias構成オプションで行われ、Vueに固有のものではありません。

Vue Webpackテンプレートでは、Webpackはpathに置き換わるように構成されて@/いsrcます。

  const path = require('path');

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

エイリアスは次のように使用されます。

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

また、tsconfigで変数を作成することもできます。

"paths": {
  "@components": ["src/components"],
  "@scss": ["src/styles/scss"],
  "@img": ["src/assests/images"],
  "@": ["src"],
}

これは、命名規則の目的で利用できます。

import { componentHeader } from '@components/header';

以下の組み合わせで乗り越えます

import HelloWorld from '@/components/HelloWorld'
=>
import HelloWorld from 'src/components/HelloWorld'

IDEはURIの警告を停止しますが、これによりコンパイル時に「build \ webpack.base.conf.js」で無効なURIが発生します。

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

ビンゴ！

resolve（ 'src'） は機能しませんが、path.resolve（ 'src'）は機能します

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

多分webpackに追加してみてください。mix.webpackConfigはlaravel mixを参照します。

mix.webpackConfig({

    resolve: {
        alias: {
            '@imgSrc': path.resolve('resources/assets/img')
        }
    }
});

そして、vueを使用します。

<img src="@imgSrc/logo.png" />