Почему разная структура проекта при разной установке Vue и библиотек?

Question

[Shurik]

Здравствуйте. Совсем запутался с установкой vue. Помогите пожалуйста разобраться.
1. Создаю проект "vue create frontend". Выбираю, допустим ручную установку и отмечаю галочками vuex и vue-router. Как полагается в папке проекта в папке src после установки имеется две папки - router и store, в который есть свои index.js где я и работаю соответственно с роутером и хранилищем.
2. Создаю проект "vue create frontend". В начале установки выбираю установку default. Потом доставляю vuex и vue-router отдельно. Все ставится, но вышеупомянутых папок с этими модулями я не наблюдаю. Зато они появляются в папке node_modules. В чем отличие?
3. Пока экспериментировал заметил разницу в установках по первому сценарию. У меня фронтенд билдится в корневую папку бэкэнда в папку dist. После чего кликая по ссылкам стартовой страницы в адресной строке, например кликая по ссылке about, добавляется dist. Т.е. localhost:8000/dist/about. Раньше, когда собирал фронтенд такого не наблюдалось. После очередной экспериментальной сборки вместо dist в пути уже была #.
Догадываюсь, что дело в настройках. И да, еще почему после установки у меня не появляется файл vue.config.js? так должно быть? приходится его создавать в ручную.
И последнее - в коде странице при всех вариантах установки пояилась надпись - We're sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to continue.
Конкретного ответа на это гугл не дал(

Comments

[zorca]

Первый способ создает структуру для router и store. Ручное добавление пакетов же ничего не создает, на то оно и ручное. Может перед изучением Vue стоит основы работы с JS изучить?

[Shurik]

zorca, изучаю js. Почти дочитал книжку, но в ней точно нету ни про npm, про node js очень поверхностно. Только базовый и клиентский js. Подскажите пожалуйста, что именно изучать? Node js, менеджер пакетов npm или ещё что. Простите, если задаю глупые вопросы

[zorca]

svisch, в идеале пройти какие-нибудь онлайн-курсы, где введут в курс дела. Изучать Node в данном случае вам нужно только в части сборки проектов, то есть познакомиться с Webpack, Gulp.

[Shurik]

zorca, понял спасибо! Буду изучать дальше.

Answer 1

[Aetae]

В node_modules лежат собранные готовые пакеты, вам туда лезть не надо.

Структура проекта, создаваемая vue-cli соответствует (очевидно) выбранным опциям.
Но эта структура - не что-то сакральное единственно верное. Всё что создал vue-cli вы можете создать вручную. Или создать совершенно другую структуру. Важна лишь логика в коде, папочки не важны.

Так что устанавливая какие-то пакеты вручную вы делаете именно это: устанавливаете пакеты. Т.е. (утрируя) просто кладёте их в node_modules и прописываете их наличие в package.json.
Это никак не влияет на ваш код. Если вы хотите их использовать в коде - вы должны использовать их в коде. Создавать отдельные файлы и папки, или просто подключать в уже имеющихся - ваше дело.
vue-cli делает это за вас, при выборе опций, но это особенность vue-cli, а не неотъемлемое свойство npm пакетов.

Comments

[Shurik]

То есть, если я правильно понял, при создании проекта в vue-cli по описанным мною выше двум сценариям кладутся библиотеки в обоих случаяхв папку node_modules? А описанные мной файлы и папки роутера и vuex это просто автоматически созданные vue-cli "заготовки/шаблоны для работы", которые можно создать вручную. Они не являются какими то исполняемыми файлами, а используют библиотеку находящуюся в node_modules например путем import VueRouter from 'vue-router', по сути являясь компонентом приложения в котором импортируется библиотека вью роутер(в данном случае). Верно?

[Aetae]

svisch, верно. Вы можете вообще всё выкинуть и оставить один main.js в котором писать весь код.

[Shurik]

Aetae, теперь всё стало на свои места. Спасибо!!!
А не можете направить на путь поиска проблемы с добавлением к урл названия папки, в которую настроен билд приложения, при переходе по его страницам? Т.е. кликаю по about, в строке урл: /dist/about.
И очень меня волнует сообщение о работающем недолжным образом js при просмотре исходного кода страницы. Где то прочитал о том, что это нормально, но на другом проекте я этого сообщения не наблюдаю.

[Aetae]

А как вы запускаете?
Если вы устанавливали через vue cli то для разработки у вас сервер запускается командой npm run serve / yarn serve. И доступен он по адресу localhost:, где port и publicPath - указанны в vue.config.js, по умолчанию 8080 и / соответственно.
Никакому dist там взяться неоткуда, если он не прописан как publicPath вручную.

Если же вы делаете npm run build / yarn build, то тут у вас уже появляется папочка dist с собранный приложением и класть на ваш сервер надо не её, а её содержимое.)

[Aetae]

svisch, ну и на всякий случай посмотрите что вам выдаёт vue --version, на текущий момент должно быть:

[Shurik]

Aetae, да 4.4.1.
Собрал сейчас по новой в ручном режиме включив библиотеки vue-router и vuex.
Все верно, dist прописан в publicPath, но если я делаю npm run build без этой настройки, то отображается пустая страница.
Если же делаю npm run serve, то по пути localhost:8080 тоже пустая страница с странным тайтлом - <%= htmlWebpackPlugin.options.title %>. Работает на серве лишь по пути localhost:8080/dist

[Shurik]

Aetae, собрал сейчас по новому, только в процессе сборки отключил режим history - dist пропал из урл, но вместо него добавилось #.
Серв точно также. Только к пути в конце dist добавляется тоже # ))

[Shurik]

Если же вы делаете npm run build / yarn build, то тут у вас уже появляется папочка dist с собранный приложением и класть на ваш сервер надо не её, а её содержимое.)

Aetae, а как класть содержимое папки?) просто я учусь опираясь уже на рабочий проект, так в нем именно такие настройки.

[Shurik]

Aetae, из оф документации:
По умолчанию Vue CLI считает, что публикация будет выполнена в корень домена, например https://www.my-app.com/. Если приложение публикуется в подкаталог, то необходимо указать этот путь с помощью этой опции. Например, если приложение будет публиковаться по адресу https://www.foobar.com/my-app/, установите publicPath в значение '/my-app/'.
У меня проект публикуется в подпапку dist. Не пойму, что я не так делаю

[Aetae]

svisch, удали vue.config.js, ты там какой-то хрени понаписал. publicPath не должен быть dist.
С отсутствующим или чистым vue.config.js всё будет работать как должно.

publicPath указывается если на сервере приложение будет лежать не в корне, а по определённому пути. Если вы поставили там dist, значит приложение должно лежать по адресу site.name/dist/ и все ссылки, естественно, должны будут принимать вид site.name/dist/<ссылка>.

[Aetae]

svisch, upd: если у вас проект специально публикуется в паку dist(отличный способ всех запутать, да) то чего вы удивляетесь наличию /dist в ссылках?

[Shurik]

Aetae, необходимость папки dist в корне веб сервера обусловлена тем, что в корне лежат исполняемые файлы бэкенда. Поэтому в dist ставлю фронт. А желание убрать dist из урл - красивый адрес. Повторюсь, при последней сборке dist из адреса изчес, но появилась решетка.
Нашел еще про настройку вью роутера base. Из документации:
Базовый URL приложения. Например, если SPA расположено по пути /app/, тогда base должно иметь значение "/app/".
Но это не помогло избавиться от ненавистного dist или #.

Aetae @Aetae
svisch, удали vue.config.js, ты там какой-то хрени понаписал. publicPath не должен быть dist.
С отсутствующим или чистым vue.config.js всё будет работать как должно.

Может взглянете на мой конфиг. Хочется все-таки с ним разобраться. Я понимаю, что публикую проект в папку dist, но все же на другом проекте все работает с красивыми урл без лишних элементов.
Вот мой vue.confif.js

let path = require('path');
let devMode = process.env.NODE_ENV !== 'production';

module.exports = {
	outputDir: path.resolve(__dirname, '../web/dist'),
	publicPath: '/dist/',
	devServer: {
	    overlay: {
	      warnings: true,
	      errors: true
	    }
	  },
  lintOnSave: devMode,
}

[Shurik]

Aetae, решил проблему добавлением опции в vue-router - mode: "history". Теперь урл без dist и #. Спасибо огромное за разъяснения. Очень помогли в понимании что к чему)))

Осталось лишь разобраться с сообщением в исходном коде страницы: We're sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to continue. )))

[Aetae]

svisch, ещё раз: publicPath - это то, по какому url доступно приложение. Совершенно не важно в какой физической папке на сервере оно при этом лежит. Указывать разный base для роутера и publicPath для vue - чревато багами.(посмотрите как base указывается если создавать vue create сразу с опцией router)
Если у вас приложение доступно по корневому url, то publicPath должен быть / или не указан.

Эта фраза лежит в стандартном шаблоне индексной страницы: src/public/index.html в теге <noscript> и показана будет только если javascript отключён.
Если вы удалили папку public, то шаблон берётся из потрохов самого vue. Чтоб восстановить - опять же создайте vue create чистый проект и заберите оттуда.

[Shurik]

Aetae, да есть папка public, а в ней index.html, а в нем и в самом деле эта надпись. Но судя по вашему ответу, она показывается из-за того, что у меня отключен js. Получается вопрос в том, как его включить и почему он выключен. Если он выключен, то и приложение я так понимаю будет работать некорректно!

[Aetae]

svisch, если он выключен, приложение работать не будет вовсе. Только эта надпись и будет видна.
Если эта надпись вида при работающем приложении, что невозможно, то значит вы что-то попортили в index.html, например тэги noscript.

...upd: "с сообщением в исходном коде страницы"?
Т.е. она не видна, она лежит в исходниках? Зачем вы лезете в исходники? Она там и должна быть. Чтоб если кто-то отключит javascript ему не белый экран показывало, а поясняющую надпись.

[Shurik]

Aetae, ага в исходном коде страницы)) Понял теперь. Полез в исходник в один из разов, когда был просто белый экран в выводе, насторожился, что работает что то неправильно. Теперь все понятно)
Спасибо еще раз за многократные объяснения - очень сильно помогли в понимании)