Как работают пути в vue-cli?

Question

[Август Милович]

Здравствуйте, изучаю vue-cli, использую стандартный пресет, не могу понять, почему такой путь к vue
Структура документов (Все лишнее убрано, вместо пробелов плюсы, из-за редактирования тостером):
-node-modules
++-vue
++++-dist
-src
++-app.vue
++-main.js

В файле main.js вот такой код:

import Vue from 'vue'
import App from './App.vue'

Почему объект Vue вообще импортируется из папки, как это работает? Из туториала я понял, что он берется из папки node-modules, но каким боком, если node-modules находится выше, и в самом node-modules в папке vue ещё папки. Так работает автоматический поиск по папкам, или vue-cli всё сам берет из node-modules, перенося в одну директорию с main.js?

И из дополнительного, кто знает, почему app.js подключается в head и в конце body, ошибка?
Заранее спасибо)

Answer 1

[Даниил Братухин]

Проекты с Vue CLI 3 включают в себя заранее настроенный конфиг Webpack, в котором прописаны alias-ы для путей "vue" и "@". Помимо этого, сборщик по умолчанию ищет модуль не только среди исходного кода самого проекта, но и в папке node_modules. При этом для "path/to/dependency" нужным файлом может оказаться как "path/to/dependency.js", так и "path/to/dependency/index.js" или же что-то другое, указанное в package.json. Подробности ищите в документации к Webpack.

По поводу app.js в двух местах – такого никогда не видел. Да и структура у вас странная для последней версии, обычно получается что-то вроде следующего:

node_modules
public
  index.html # без app.js
src
  components/(компоненты)
  assets/(прочие файлы)
  App.vue
  main.js
package.json
(конфиги)

Comments

[Август Милович]

Аа, тут просто не проставили пробелы, когда я структуру писал, спасибо)

Answer 2

[InfernoElegy]

Если ты пишешь путь без "/" или "./", вебпак понимает это как ссылка к node_modules