Tôi đang bắt đầu một dự án vue.js mới vì vậy tôi đã sử dụng công cụ vue-cli để dàn dựng một dự án webpack mới (tức là vue init webpack).

Khi tôi đang xem qua các tệp được tạo, tôi nhận thấy các lần nhập sau trong src/router/index.jstệp:

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

Tôi chưa thấy dấu hiệu ( @) trong một đường dẫn trước đây. Tôi nghi ngờ nó cho phép các đường dẫn tương đối (có thể?) Nhưng tôi muốn chắc chắn rằng tôi hiểu những gì nó thực sự làm.

Tôi đã thử tìm kiếm trên mạng nhưng không thể tìm thấy lời giải thích (thăm dò vì tìm kiếm "tại dấu hiệu" hoặc sử dụng ký tự chữ @không giúp làm tiêu chí tìm kiếm).

Những gì @làm trong đường dẫn này (liên kết đến tài liệu sẽ là tuyệt vời) và đây có phải là một điều es6? Một điều webpack? Một điều vue-loader?

CẬP NHẬT

Cảm ơn Felix Kling đã chỉ cho tôi một câu hỏi / câu trả lời stackoverflow trùng lặp khác về cùng câu hỏi này.

Mặc dù bình luận trên bài đăng stackoverflow khác không phải là câu trả lời chính xác cho câu hỏi này (nó không phải là một plugin babel trong trường hợp của tôi), nó đã chỉ cho tôi đi đúng hướng để tìm ra nó là gì.

Trong giàn giáo mà vue-cli tạo ra cho bạn, một phần của cấu hình webpack cơ sở thiết lập một bí danh cho các tệp .vue:

Điều này có ý nghĩa cả trong thực tế là nó cung cấp cho bạn một đường dẫn tương đối từ tệp src và nó loại bỏ yêu cầu .vueở cuối đường dẫn nhập (mà bạn thường cần).

Cảm ơn đã giúp đỡ!

Điều này được thực hiện với resolve.aliastùy chọn cấu hình Webpack và không dành riêng cho Vue.

Trong mẫu Vue Webpack , Webpack được cấu hình để thay thế @/bằng srcđường dẫn :

  const path = require('path');

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

Bí danh được sử dụng như:

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

Ngoài ra, hãy nhớ rằng bạn cũng có thể tạo các biến trong tsconfig:

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

Điều này có thể được sử dụng cho mục đích quy ước đặt tên:

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

Tôi kết thúc với sự kết hợp sau đây

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

IDE sẽ ngừng cảnh báo uri, nhưng điều này gây ra uri không hợp lệ khi biên dịch, trong "build \ webpack.base.conf.js"

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

Bingoo!

giải quyết ('src') không hoạt động đối với tôi nhưng path.resolve ('src') hoạt động

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

Có thể thử thêm vào webpack. mix.webpackConfig tham khảo hỗn hợp laravel .

mix.webpackConfig({

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

Và sau đó trong sử dụng vue.

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