Yeni bir vue.js projesi başlatıyorum, bu yüzden yeni bir webpack proje (yani vue init webpack) iskele için vue-cli aracını kullandım .

Ben oluşturulan dosyaları yürürken src/router/index.jsdosyada aşağıdaki ithalat fark ettim :

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

Daha önce @bir yolda at işareti ( ) görmedim . Göreli yollara izin verdiğinden şüpheleniyorum (belki?) Ama gerçekten ne yaptığını anladığımdan emin olmak istedim.

Çevrimiçi arama yapmayı denedim ama bir açıklama bulamadım (çünkü "tabelaya" ya da değişmez karakteri kullanarak @arama kriteri olarak yardımcı olmuyor).

@Bu yolda ne yapmak (belgelere bağlantı harika olurdu) ve bu bir es6 şey mi? Web paketi bir şey mi? Vue-loader bir şey mi?

GÜNCELLEME

Felix Kling, beni aynı soru hakkında başka bir yinelenen yığın akışı sorusuna / cevabına yönlendirdiği için teşekkürler

Diğer stackoverflow yazıdaki yorum bu sorunun kesin cevabı olmasa da (benim durumumda bir babel eklentisi değildi) ne olduğunu bulmak için beni doğru yönde gösterdi.

Vue-cli'nin sizin için krank yaptığı iskelede, temel web paketi yapılandırmasının bir kısmı .vue dosyaları için bir takma ad oluşturur:

Bu markaları size src dosyasından göreli bir yol kazandırdığı gerçeği hem algılayabilir ve bu gereksinimini ortadan kaldırır .vue(normalde gerekir) ithalat yolunun sonunda.

Yardım için teşekkürler!

Bu, Webpack resolve.aliasyapılandırma seçeneğiyle yapılır ve Vue'ya özgü değildir.

Vue WebPack şablonunda , WebPack yerine yapılandırıldı @/ile srcyoluna :

  const path = require('path');

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

Takma ad şu şekilde kullanılır:

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

Ayrıca tsconfig'de de değişkenler oluşturabileceğinizi unutmayın:

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

Bu, konvansiyon amaçları için kullanılabilir:

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

Aşağıdaki kombinasyonu geçiyorum

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

IDE, uri uyarısını durduracaktır, ancak bu derlendiğinde "build \ webpack.base.conf.js" dosyasında geçersiz uri'ye neden olur.

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

Bingoo!

çözmek ('src') benim için çalışmıyor ama path.resolve ('src') çalışmıyor

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

Belki web paketini eklemeyi deneyin. mix.webpackConfig referansları laravel mix .

mix.webpackConfig({

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

Ve sonra vue kullanımda.

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