Saya memulai proyek vue.js baru jadi saya menggunakan alat vue-cli untuk merancah proyek webpack baru (yaitu vue init webpack).

Saat saya sedang menelusuri file yang dihasilkan, saya perhatikan impor berikut dalam 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
        }
    ]
})

Saya belum pernah melihat tanda pada ( @) di jalur sebelumnya. Saya curiga ini memungkinkan untuk jalur relatif (mungkin?) Tapi saya ingin memastikan saya mengerti apa yang sebenarnya dilakukannya.

Saya mencoba mencari-cari di internet tetapi tidak dapat menemukan penjelasan (mungkin karena mencari "tanda" atau menggunakan karakter literal @tidak membantu sebagai kriteria pencarian).

Apa yang @dilakukan di jalur ini (tautan ke dokumentasi akan fantastis) dan apakah ini hal yang penting? Suatu hal webpack? Suatu hal yang memuat loader?

MEMPERBARUI

Terima kasih Felix Kling untuk mengarahkan saya ke pertanyaan / jawaban duplikat stackoverflow lain tentang pertanyaan yang sama ini.

Sementara komentar pada posting stackoverflow lainnya bukan jawaban yang tepat untuk pertanyaan ini (itu bukan plugin babel dalam kasus saya) itu memang mengarahkan saya ke arah yang benar untuk menemukan apa itu.

Di dalam scaffolding yang memberikan Anda clue-cli, bagian dari konfigurasi webpack dasar mengatur alias untuk file .vue:

Ini masuk akal baik dalam kenyataan bahwa itu memberi Anda jalur relatif dari file src dan menghapus persyaratan .vuedi akhir jalur impor (yang biasanya Anda butuhkan).

Terima kasih untuk bantuannya!

Ini dilakukan dengan resolve.aliasopsi konfigurasi Webpack dan tidak spesifik untuk Vue.

Di template Vue Webpack , Webpack dikonfigurasi untuk mengganti @/dengan srcpath :

  const path = require('path');

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

Alias ​​digunakan sebagai:

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

Perlu diingat Anda juga dapat membuat variabel di tsconfig:

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

Ini dapat digunakan untuk tujuan konvensi penamaan:

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

Saya selesai dengan kombinasi berikut

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

IDE akan berhenti memperingatkan uri, tetapi ini menyebabkan uri tidak valid saat mengkompilasi, di "build \ webpack.base.conf.js"

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

Bingoo!

tekad ( 'src') tidak bekerja untuk saya tapi path.resolve ( 'src') karya

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

Mungkin coba tambahkan di webpack. mix.webpackConfig referensi LARAVEL campuran .

mix.webpackConfig({

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

Dan kemudian dalam penggunaannya.

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