Импорт ES6 с использованием ('@') входа в путь в проекте vue.js с использованием Webpack

Я начинаю новый проект 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
        }
    ]
})

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

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

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

UPDATE

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

В то время как комментарий к другому сообщению stackoverflow не является точным ответом на этот вопрос (это не был плагин babel в моем случае), он указал мне в правильном направлении, чтобы найти, что это было.

В лесах, которые vue-cli запускают для вас, часть базовой конфигурации webpack устанавливает псевдоним для файлов .vue:

Псевдоним в проекте

Это имеет смысл как в том, что он дает вам относительный путь из файла src, и устраняет требование .vue в конце пути импорта (который вам обычно нужен).

Спасибо за помощь!

Ответы

Ответ 1

Это делается с помощью параметра конфигурации resolve.alias Webpack и не относится к Vue.

В шаблоне Vue Webpack Webpack настроен для замены @/ на путь src:

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

Ответ 2

Также имейте в виду, что вы также можете создавать переменные в tsconfig:

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

Это может быть использовано в целях соглашения об именовании:

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

Ответ 3

Я заканчиваю со следующей комбинацией

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'),
  }
},

Ответ 4

разрешения ( 'SRC') не работает для меня но path.resolve( 'ЦСИ') работает

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