web-dev-qa-db-ja.com

Webpackを使用したvue.jsプロジェクトでat（ '@'）サインインパスを使用したES6インポート

私は新しいvue.jsプロジェクトを始めているので、vue-cliツールを使って新しいウェブパックプロジェクト（すなわち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のことですか？ウェブパックのこと？ Vue-loaderなの？

更新

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

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

Vue-cliがあなたに代わって立ち上げる足場では、ベースのwebpack設定の一部が.vueファイルのエイリアスを設定します。

Alias location within project

これは、srcファイルからの相対パスとインポートパスの最後にある.vueの要件を削除するという意味でも意味があります（通常は必要です）。 ）.

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

javascriptwebpackecmascript-6vue.js
173
Chris Schmitz

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

Vue Webpackテンプレート では、Webpackは@/を src path に置き換えるように設定されています：

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

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

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

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

import { componentHeader } from '@components/header';
2
Tyler Canton

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

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'),
  }
},

ビンゴー！

0
Luân Trương