Importazione ES6 utilizzando il percorso di accesso at ('@') in un progetto vue.js utilizzando Webpack


273

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:

Posizione alias all'interno del progetto

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!



1
@FelixKling Non è un duplicato esatto perché non risponde all'intera domanda, è una cosa es6? Una cosa da webpack? Una cosa da caricatore di vue?
Estus Flask

Sì, penso che la domanda fosse simile ma non duplicata. Indipendentemente da ciò, ho capito da dove proveniva e ho aggiornato la domanda con una spiegazione poiché non posso aggiungerla come risposta.
Chris Schmitz,

@estus: la risposta chiarisce che non fa parte di ES6 ma di una configurazione di webpack, non credi? E questo è esattamente il caso anche qui, solo che la natura della configurazione è leggermente diversa.
Felix Kling

@FelixKling Credo che quando estus abbia sottolineato che c'era ancora una domanda sul tipo di cosa non avevo ancora aggiunto l'aggiornamento (ho visto il suo commento entrare mentre stavo digitando l'aggiornamento). Sono pronto e c'è una spiegazione dettagliata sulla mia istanza particolare, quindi sono a posto. Grazie ragazzi.
Chris Schmitz,

Risposte:


243

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>';

171
JavaScript non è più JavaScript. Babel / webpack ci offre questo linguaggio Frankenstein e in qualche modo i nuovi sviluppatori dovrebbero sapere dove finiscono le specifiche ECMAScript e iniziano i plug-in / le trasformazioni degli utenti. È davvero triste, imo.
Grazie

3
@naomik Spetta all'utente introdurre questi trucchi nella configurazione o meno. Non è un grosso problema per Vue poiché si basa comunque sul suo formato di file .vue personalizzato.
Estus Flask

15
Personalmente penso che la possibilità di aggiungere flessibilità se lo desideri sia una buona cosa. Lo vedo meno come Frankenstein e più come Voltron; puoi fare cose come un leone o combinare insieme diversi leoni per avere un robot più grande. Sì, a volte ricevi domande come questa, ma non è che le risposte non possano essere trovate. Davvero, puoi prendere il punto di vista di Frankenstein o Voltron con qualsiasi progetto di qualsiasi dimensione, è solo "usare e comprendere le dipendenze".
Chris Schmitz,

1
@ChrisSchmitz Dipende dal contesto e dalla prospettiva. Fare qualcosa del genere limiterà il progetto all'uso del Webpack. Potrebbe non essere una buona cosa se il progetto intende utilizzare i moduli ES6 nativi quando arriveranno, oppure è Nodo in cui CommonJS può essere utilizzato per i moduli. D'altra parte, i percorsi relativi lunghi possono essere più difficili da mantenere e rifattorizzare.
Estus Flask

3
Quando si utilizza vue-cliv3 + è necessario utilizzare ~@per fare riferimento alla srccartella. Ad esempio:$font-path: '~@/assets/fonts/';
Consta Gorgan,

9

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';

Ma questo tipo di alias verrà lasciato nudo nel JS di origine e quindi in fase di esecuzione dovrai far intercedere un wrapper per far funzionare l'alias. Forse c'è un modo tramite babel per questa sintassi TS di convertirsi al momento della compilazione? Con Typescript tscnon lo è e quindi avrai bisogno di qualcosa di simile module-aliaso tsconfig-paths.
Ken,

3

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!


1

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

1

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" />
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.