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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как в docker удалить ненужные контейнеры и образы?

и вам спасибо)

Как в docker удалить ненужные контейнеры и образы?

спасибо)

Как присвоить в функции значение глобальной переменной?

Владимир Солнцев, )))))

Как присвоить в функции значение глобальной переменной?

Владимир Солнцев, хорошо! Спасибо за подсказки, буду читать и думать что и как)

Как присвоить в функции значение глобальной переменной?

Владимир Солнцев, может) Но в принципе цель не только сделать рабочий код того примера, а хотелось бы разобраться почему казалось бы простые вещи не работают...
Нашел на стэковерфлоу немного похожую проблему. Только не особо понял на английском к каким именно переменным там не может тс получить доступ, но ему там посоветовали использовать замыкание:

reader.onload = (function(f) {
            return function(e) {
                // Here you can use `e.target.result` or `this.result`
                // and `f.name`.
            };
        })(file);

Не знаю может ли быть в этом проблема и если да, то как это применить в моем случае))

Как присвоить в функции значение глобальной переменной?

Владимир Солнцев, я понял о чем вы, но пока точно разобраться не в силах, так как книжка по базовым знаниям js еще не до конца прочитана, а тут вот такая задача))
В похожем, но рабочем коде, который я уже упоминал, есть небольшое различие в обработке события:

const input = document.querySelector("#in");
				let file;

				input.addEventListener("change", async e => {
				  file = e.target.files[0];
				  this.fileContent = await file.text();
				});

Может это и играет ключевую роль?) this.file.Content - это в принципе и есть глобальная переменная куда надо присвоить значени. В изначальном примере его нет ввиду тестов)

Как присвоить в функции значение глобальной переменной?

Владимир Солнцев, читать пытаюсь в другом методе. Вообще, если быть точнее, то что я привел - это метод vue. Он срабатывает при загрузке страницы. То есть что происходит. Загружается страница, я выбираю файл в поле инпут, срабатывает событие onchange и срабатывает обработчик filePicked. Сут в том, чтобы значение вычисляемое в нем передать в vue, a потом использовать дальше в другом методе. Похожий код, но немного проще с тем же принципом работает у меня, но тут меня смущают вложенные функции и в частности строка "reader.onload = function(e)"

Как присвоить в функции значение глобальной переменной?

Владимир Солнцев, нет! а как им пользоваться?)

Как распарсить xls файл в JavaScript в json или xml?

Максим Ленский, ладно, буду думать) еще раз спасибо)

Как распарсить xls файл в JavaScript в json или xml?

Максим Ленский, то есть скрипт берет строку и переводит ее в json строку? Может во время парсинга в свою структуру переводить. В объект например...