Zaczynam nowy projekt vue.js, więc użyłem narzędzia vue-cli, aby stworzyć nowy projekt pakietu WWW (tj vue init webpack.).

Przechodząc przez wygenerowane pliki, zauważyłem następujący import do src/router/index.jspliku:

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
        }
    ]
})

Nie widziałem wcześniej znaku at ( @) na ścieżce. Podejrzewam, że pozwala na względne ścieżki (może?), Ale chciałem mieć pewność, że rozumiem, co naprawdę robi.

Próbowałem szukać w Internecie, ale nie byłem w stanie znaleźć wyjaśnienia (problem, ponieważ wyszukiwanie „przy znaku” lub użycie dosłownego znaku @nie pomaga jako kryterium wyszukiwania).

Co robi na @tej ścieżce (link do dokumentacji byłby fantastyczny) i czy jest to rzecz es6? Rzeczy z paczki internetowej? Vue-loader?

AKTUALIZACJA

Dziękuję Felixowi Klingowi za wskazanie mi kolejnego duplikatu pytania / odpowiedzi na temat przepełnienia stosu dotyczącego tego samego pytania.

Chociaż komentarz do drugiego postu przepełnienia stosu nie jest dokładną odpowiedzią na to pytanie (w moim przypadku nie była to wtyczka babel), wskazał mi właściwy kierunek, aby znaleźć to, co to było.

W rusztowaniu, które przygotowuje dla ciebie vue-cli, część podstawowej konfiguracji webpacka tworzy alias dla plików .vue:

Ma to sens zarówno dlatego, że daje względną ścieżkę z pliku src, jak i usuwa wymaganie .vuena końcu ścieżki importu (co zwykle jest potrzebne).

Dzięki za pomoc!

Odbywa się to za pomocą resolve.aliasopcji konfiguracji pakietu Webpack i nie jest specyficzne dla Vue.

W Vue WebPACK szablonu , WebPACK jest skonfigurowany tak, aby zastąpić @/ze srcścieżki :

  const path = require('path');

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

Alias ​​jest używany jako:

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

Pamiętaj również, że możesz również tworzyć zmienne w tsconfig:

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

Można to wykorzystać do celów konwencji nazewnictwa:

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

Przychodzę z następującą kombinacją

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

IDE przestanie ostrzegać o URI, ale powoduje to nieprawidłowe URI podczas kompilacji w „build \ webpack.base.conf.js”

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

Bingoo!

resolve ( 'src') nie ma u mnie działa, ale path.resolve ( 'src') Roboty

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

Może spróbuj dodać w pakiecie internetowym. mix.webpackConfig odwołuje się do laravel mix .

mix.webpackConfig({

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

A potem vue use.

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