Import ES6 za pomocą ścieżki logowania at ( ' @ ' ) w vue.projekt js przy użyciu Webpack

Zaczynam nową vue.projekt js więc użyłem narzędzia vue-cli do rusztowania nowego projektu webpack (tj. vue init webpack).

Gdy przechodziłem przez wygenerowane pliki zauważyłem następujący import w pliku 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
        }
    ]
})
Nie widziałem wcześniej znaku at (@) na ścieżce. Podejrzewam, że pozwala na ścieżki względne (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śnienie (prob, ponieważ szukanie "at sign" lub użycie literalnego znaku @ nie pomaga jako kryteria wyszukiwania).

Co robi @ w tej ścieżce (link do dokumentacji byłby fantastyczny) i czy to coś es6? Webpack? Vue-loader?

UPDATE

Dzięki Felixowi Klingowi za wskazanie mi kolejnego duplikatu pytania/odpowiedzi na to samo pytanie.

Podczas gdy komentarz do drugiego postu stackoverflow nie jest dokładnie odpowiedź na to pytanie (w moim przypadku nie była to wtyczka babel) wskazała mi właściwy kierunek, aby znaleźć to, co to było.

W rusztowaniu, które vue-cli dla Ciebie wykręca, część podstawowego konfiguratora webpack ustawia alias dla .pliki vue:

Lokalizacja aliasu w projekcie

Ma to sens zarówno w tym, że daje względną ścieżkę z pliku src , jak i usuwa wymóg .vue na końcu ścieżki importu (której zwykle potrzebujesz).

Dzięki za pomoc!

Author: Alexander O'Mara, 2017-03-12
Source

6 answers

Robi się to za pomocą Webpacka resolve.alias Opcja konfiguracji i nie jest specyficzna dla Vue.

W szablonie Vue Webpack , Webpack jest skonfigurowany tak, aby zastąpić @/ src ścieżka : 

  const path = require('path');

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

Alias jest używany jako: 

import '@/<path inside src folder>';
 277
Author: Estus Flask,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-01-30 14:28:49

Należy również pamiętać, że można 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';
 16
Author: Tyler Canton,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-04-19 15:39:40

I get over with following combination 

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

IDE przestanie ostrzegać uri, ale spowoduje to nieprawidłowe uri podczas kompilacji, w " build \ webpack.baza.conf.js " 

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'src': resolve('src'),
  }
},
Bingoo!
 4
Author: Luân Trương,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-06-12 14:41:15

Może spróbuj dodać w webpack. mix.webpackconfig referencje Laravel mix .

mix.webpackConfig({

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

A następnie w użyciu vue.

<img src="@imgSrc/logo.png" />
 3
Author: Paul,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-05-22 17:43:46

resolve ('src') no works for me ale / align = "left" / resolve ("src") prace 

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.resolve('src')
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
 1
Author: Marcelo Assis,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-09-17 22:16:29

Coś musiało się zmienić. Odpowiedź tutaj nie jest już poprawna. Ten projekt w rozdziale 09 używa znaku @ w poleceniach import, ale webpack.config.plik js nie posiada instrukcji Path resolve: 

let service = process.VUE_CLI_SERVICE

if (!service || process.env.VUE_CLI_API_MODE) {
  const Service = require('./lib/Service')
  service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
  service.init(process.env.VUE_CLI_MODE || process.env.NODE_ENV)
}

module.exports = service.resolveWebpackConfig()
 1
Author: Dean Schulze,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-07-16 17:29:40