ฉันเริ่มโครงการ vue.js ใหม่ดังนั้นฉันจึงใช้เครื่องมือ vue-cli เพื่อพิจารณาโครงการ webpack ใหม่ (เช่นvue init webpack)

ขณะที่ฉันกำลังเดินผ่านไฟล์ที่สร้างขึ้นฉันสังเกตเห็นการนำเข้าต่อไปนี้ในsrc/router/index.jsไฟล์:

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

ฉันไม่เคยเห็นเครื่องหมาย at ( @) ในเส้นทางก่อน ฉันสงสัยว่ามันจะช่วยให้เส้นทางญาติ (อาจ?) แต่ฉันต้องการให้แน่ใจว่าฉันเข้าใจสิ่งที่มันทำอย่างแท้จริง

ฉันพยายามค้นหาทางออนไลน์ แต่ไม่สามารถหาคำอธิบายได้ (อาจเป็นเพราะการค้นหา "at sign" หรือการใช้ตัวอักษร@ไม่ได้ช่วยในการค้นหาตามเกณฑ์)

สิ่งที่@ต้องทำในเส้นทางนี้ (ลิงก์ไปยังเอกสารประกอบจะยอดเยี่ยม) และนี่คือสิ่งที่ es6? สิ่งที่ webpack? สิ่ง vue-loader?

UPDATE

ขอบคุณ Felix Kling ที่ชี้ให้ฉันไปยังคำถาม / คำตอบสแต็คโอเวอร์โฟลว์ที่ซ้ำกันเกี่ยวกับคำถามเดียวกัน

ในขณะที่ความคิดเห็นในโพสต์สแต็คโอเวอร์โฟลว์อื่น ๆ ไม่ใช่คำตอบที่แน่นอนสำหรับคำถามนี้ (ไม่ใช่ปลั๊กอินของ Babel ในกรณีของฉัน) แต่มันชี้ให้ฉันในทิศทางที่ถูกต้องเพื่อค้นหาว่ามันคืออะไร

ในนั่งร้านที่ vue-cli หาคุณส่วนหนึ่งของการกำหนดค่า webpack พื้นฐานตั้งค่านามแฝงสำหรับไฟล์. vue:

สิ่งนี้สมเหตุสมผลทั้งในความจริงที่ว่ามันให้พา ธ สัมพัทธ์กับคุณจากไฟล์ src และจะลบข้อกำหนดของ.vueที่ส่วนท้ายของพา ธ การนำเข้า (ซึ่งปกติคุณต้องการ)

ขอบคุณสำหรับความช่วยเหลือ!

สิ่งนี้ทำกับresolve.aliasตัวเลือกการกำหนดค่าWebpack และไม่เฉพาะเจาะจงกับ Vue

ในเท็มเพลต Vue Webpack Webpack ถูกกำหนดค่าเพื่อแทนที่@/ด้วยsrcพา ธ :

  const path = require('path');

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

นามแฝงถูกใช้เป็น:

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

โปรดทราบว่าคุณสามารถสร้างตัวแปรใน tsconfig ได้เช่นกัน:

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

สิ่งนี้สามารถใช้เพื่อวัตถุประสงค์ในการตั้งชื่อการประชุม:

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

ฉันได้รับมากกว่าด้วยการรวมกันดังต่อไปนี้

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

IDE จะหยุดเตือน uri แต่สิ่งนี้ทำให้ uri ไม่ถูกต้องเมื่อคอมไพล์ใน "build \ webpack.base.conf.js"

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

Bingoo!

แก้ไข ('src') ไม่ทำงานสำหรับฉัน แต่ path.resolve ('src') ใช้งานได้

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

อาจลองเพิ่มใน webpack mix.webpackConfigอ้างอิงLaravel ผสม

mix.webpackConfig({

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

และจากนั้นในการใช้งาน vue

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