Sto iniziando un nuovo progetto vue.js, quindi ho usato lo strumento vue-cli per creare un nuovo progetto webpack (ad es vue init webpack.).

Mentre stavo camminando attraverso i file generati ho notato le seguenti importazioni nel src/router/index.jsfile:

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

Non ho mai visto il segno at ( @) in un percorso prima. Ho il sospetto che consenta percorsi relativi (forse?) Ma volevo essere sicuro di capire cosa fa veramente.

Ho provato a cercare online ma non sono riuscito a trovare una spiegazione (probabilmente perché cercare "al segno" o usare il carattere letterale @non aiuta come criteri di ricerca).

Cosa fa @in questo percorso (il collegamento alla documentazione sarebbe fantastico) ed è una cosa es6? Una cosa da webpack? Una cosa da caricatore di vue?

AGGIORNARE

Grazie Felix Kling per avermi indicato un'altra domanda / risposta stackover duplicata su questa stessa domanda.

Mentre il commento sull'altro post di StackOverflow non è la risposta esatta a questa domanda (non era un plug-in babel nel mio caso), mi ha indirizzato nella direzione corretta per trovare quello che era.

Nell'impalcatura che vue-cli fa per te, parte della configurazione webpack di base imposta un alias per i file .vue:

Questo ha senso sia nel fatto che ti dà un percorso relativo dal file src e rimuove il requisito del .vuealla fine del percorso di importazione (che normalmente hai bisogno).

Grazie per l'aiuto!

Questo viene fatto con l' resolve.aliasopzione di configurazione Webpack e non è specifica per Vue.

Nel modello Vue Webpack , Webpack è configurato per sostituire @/con il srcpercorso :

  const path = require('path');

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

L'alias viene utilizzato come:

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

Tieni anche presente che puoi creare variabili anche in tsconfig:

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

Questo può essere utilizzato ai fini della convenzione di denominazione:

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

Vado avanti con la seguente combinazione

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

IDE smetterà di avvisare l'uri, ma ciò causa l'uri non valido durante la compilazione, in "build \ webpack.base.conf.js"

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

Bingoo!

determinazione ( 'src') non funziona per me, ma path.resolve ( 'src') opere

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

Forse prova ad aggiungere nel webpack. mix.webpackConfig fa riferimento a laravel mix .

mix.webpackConfig({

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

E poi in vue use.

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