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

273

Я начинаю новый проект 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в конце пути импорта (которое обычно требуется).

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

Крис Шмитц
источник
1
@FelixKling Это не точный дубликат, потому что он не отвечает на весь вопрос, это вещь es6? Вещь в вебпаке? Вещь vue-loader?
Estus Колба
Да, я думаю, что вопрос был похож, но не дубликат. Независимо от того, я выяснил, откуда он взялся и обновил вопрос объяснением, так как не могу добавить его в качестве ответа.
Крис Шмитц
@estus: ответ проясняет, что это не часть ES6, а конфигурация webpack, не так ли? И в этом тоже дело, только характер конфигурации немного другой.
Феликс Клинг
@FelixKling Я полагаю, когда Estus указал, что все еще остается вопрос о том, что это за вещь, я еще не добавил обновление (я увидел, что его комментарий появился, когда я печатал обновление). У меня все готово, и есть подробное объяснение о моем конкретном случае, поэтому я готов идти. Спасибо, парни.
Крис Шмитц

Ответы:

243

Это делается с 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>';
Настой Эстус
источник
171
JavaScript просто больше не JavaScript. Babel / webpack дает нам этот язык Франкенштейна, и каким-то образом новые разработчики должны знать, где заканчивается спецификация ECMAScript и начинаются плагины / преобразования пользовательского интерфейса. Это действительно грустно, имо.
Спасибо,
3
@naomik Пользователь может вводить такие трюки в настройку или нет. Для Vue это не имеет большого значения, так как в любом случае он использует свой собственный формат файла .vue.
Estus Flask
15
Лично я думаю, что способность добавить гибкость, если вы хотите, это хорошая вещь. Я вижу это меньше как Франкенштейн и больше как Вольтрон; Вы можете делать вещи как львы или комбинировать разных львов вместе, чтобы получить большего робота. Да, иногда вы получаете вопросы, подобные этому, но это не значит, что ответы не могут быть найдены. На самом деле, вы можете взять представление Франкенштейна или Вольтрона с любым проектом любого размера, это просто «использование и понимание зависимостей».
Крис Шмитц
1
@ChrisSchmitz Это зависит от контекста и перспективы. Подобные действия ограничат использование Webpack в проекте. Может быть нехорошо, если проект намеревается использовать собственные модули ES6, когда они появятся, или это узел, где CommonJS можно использовать для модулей. Длинные относительные пути могут быть сложнее поддерживать и реорганизовать, с другой стороны.
Estus Flask
3
При использовании vue-cliv3 + вы должны использовать ~@для ссылки на srcпапку. Например:$font-path: '~@/assets/fonts/';
Конста Горган
9

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

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

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

import { componentHeader } from '@components/header';
Тайлер Кантон
источник
Но этот тип псевдонима будет оставлен открытым в исходном JS, а затем во время выполнения вам понадобится оболочка, чтобы заставить псевдоним работать. Может быть, с помощью babel этот синтаксис TS можно преобразовать во время сборки? С Typescript tscэто не так, и поэтому вам нужно что-то вроде module-aliasили tsconfig-paths.
Кен
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'),
  }
},

Bingoo!

Луан Тронг
источник
1

У меня нет разрешения ('src'), но работает path.resolve ('src')

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.resolve('src')
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
Марсело Ассис
источник
1

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

mix.webpackConfig({

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

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

<img src="@imgSrc/logo.png" />
Павел
источник