Я начинаю новый проект vue.js, поэтому я использовал инструмент vue-cli для создания нового проекта веб-пакета (т.е. 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
        }
    ]
})

Я не видел знак ( @) в пути раньше. Я подозреваю, что это учитывает относительные пути (возможно?), Но я хотел быть уверен, что я понимаю, что это действительно делает.

Я пытался искать в Интернете, но не смог найти объяснения (вероятно, потому что поиск «по знаку» или использование буквенного символа @не помогает в качестве критерия поиска).

Что @делать по этому пути (ссылка на документацию была бы фантастической) и это вещь es6? Вещь в вебпаке? Вещь vue-loader?

ОБНОВИТЬ

Спасибо Феликсу Клингу за то, что он указал мне на другой повторяющийся вопрос / ответ на этот вопрос.

Хотя комментарий к другому сообщению stackoverflow не является точным ответом на этот вопрос (это не был плагин 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']
  },

Может быть, попробуйте добавить в веб-пакет. mix.webpackConfig ссылки на микс laravel .

mix.webpackConfig({

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

А потом в пользу использования.

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