新しい 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 question is about
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}
]
})
パスにアットマーク ( @) があるのを見たことがありません。相対パスが使用できるのではないかと思いますが (多分?)、実際に何をするのか理解したいと思いました。
オンラインで検索してみましたが、説明を見つけることができませんでした (おそらく、「アット マーク」で検索したり、リテラル文字を使用したりしても、@検索条件として役に立たないためです)。
このパスでは何が@行われるのでしょうか (ドキュメントへのリンクがあると素晴らしいです)。これは es6 の機能ですか? webpack の機能ですか? vue-loader の機能ですか?
アップデート
同じ質問に関する別の重複した StackOverflow の質問/回答を教えてくれた Felix Kling に感謝します。
他の StackOverflow の投稿のコメントはこの質問に対する正確な答えではありませんが (私の場合は babel プラグインではありませんでした)、それが何であるかを見つけるための正しい方向を示してくれました。
vue-cli が生成するスキャフォールディングでは、基本の webpack 構成の一部が .vue ファイルのエイリアスを設定します。
これは、src ファイルからの相対パスが提供され、.vueインポート パスの末尾のの必要性 (通常は必要) が削除されるという点で意味があります。
助けてくれてありがとう！
ベストアンサー1
これはWebpackで行われますresolve.alias構成オプションであり、Vue に固有のものではありません。
Vue Webpackテンプレート、Webpackは@/次のように置き換えるように設定されていますsrcパス:
const path = require('path');
...
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
...
'@': path.resolve('src'),
}
},
...
エイリアスは次のように使用されます:
import '@/<path inside src folder>';