Я запускаю новий проект 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 ( ). Я підозрюю, що це дозволяє відносні шляхи (можливо?), Але я хотів бути впевненим, що розумію, що це справді робить.

Я спробував здійснити пошук в Інтернеті, але не зміг знайти пояснення (проблема, оскільки пошук "за знаком" або використання буквеного символу @не допомагає як критерії пошуку).

Що @робити на цьому шляху (посилання на документацію було б фантастичним) і чи це справа es6? Веб-пакет? Річ з навантажувачем?

ОНОВЛЕННЯ

Дякую Фелікс Клінг, що вказав мені на ще один дублікат запитання / відповіді щодо цього ж запитання.

Хоча коментар до іншої публікації про stackoverflow не є точною відповіддю на це питання (у моєму випадку це не був дитячий плагін), він мене вказав у правильному напрямку, щоб знайти, що це було.

У ешафотів, які запускають vue-cli для вас, частина базового конфігурації веб-пакета встановлює псевдонім для файлів .vue:

Це має сенс і в тому, що він дає вам відносний шлях до файлу src, і він видаляє вимогу .vueв кінці шляху імпорту (який вам зазвичай потрібен).

Дякую за допомогу!

Це робиться за допомогою resolve.aliasпараметра налаштування Webpack і не є специфічним для 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, але це спричиняє недійсні урі під час компіляції у "build \ webpack.base.conf.js"

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

Бінго!

Рішучість ( «ЦСМ») не працює для мене , але path.resolve ( «ДКЗ») роботи

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

Можливо, спробуйте додати в webpack. mix.webpackConfig посилання на laravel mix .

mix.webpackConfig({

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

А потім у використанні vue.

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