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.js
file:
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 .vue
di akhir jalur impor (yang biasanya Anda butuhkan).
Terima kasih untuk bantuannya!
sumber
Jawaban:
Ini dilakukan dengan
resolve.alias
opsi konfigurasi Webpack dan tidak spesifik untuk Vue.Di template Vue Webpack , Webpack dikonfigurasi untuk mengganti
@/
dengansrc
path :Alias digunakan sebagai:
sumber
vue-cli
v3 + Anda harus menggunakan folder~@
referensisrc
. Contoh:$font-path: '~@/assets/fonts/';
Perlu diingat Anda juga dapat membuat variabel di tsconfig:
Ini dapat digunakan untuk tujuan konvensi penamaan:
sumber
tsc
tidak dan karena itu Anda akan memerlukan sesuatu sepertimodule-alias
atautsconfig-paths
.Saya selesai dengan kombinasi berikut
IDE akan berhenti memperingatkan uri, tetapi ini menyebabkan uri tidak valid saat mengkompilasi, di "build \ webpack.base.conf.js"
Bingoo!
sumber
tekad ( 'src') tidak bekerja untuk saya tapi path.resolve ( 'src') karya
sumber
Mungkin coba tambahkan di webpack. mix.webpackConfig referensi LARAVEL campuran .
Dan kemudian dalam penggunaannya.
sumber