Я начинаю новый проект 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
путь :Псевдоним используется как:
источник
vue-cli
v3 + вы должны использовать~@
для ссылки наsrc
папку. Например:$font-path: '~@/assets/fonts/';
Также имейте в виду, что вы также можете создавать переменные в tsconfig:
Это может быть использовано в целях соглашения об именовании:
источник
tsc
это не так, и поэтому вам нужно что-то вродеmodule-alias
илиtsconfig-paths
.Я заканчиваю со следующей комбинацией
IDE перестанет предупреждать URI, но это вызывает недопустимый URI при компиляции в "build \ webpack.base.conf.js"
Bingoo!
источник
У меня нет разрешения ('src'), но работает path.resolve ('src')
источник
Может быть, попробуйте добавить в веб-пакет. mix.webpackConfig ссылки на микс laravel .
А потом в пользу использования.
источник