Компиляция Vue-приложения в обычный js скрипт? Или не возможно?

Question

[Григорий Васильков]

Добрый день, не удается понять документацию Vue в плане преобразования проекта в js файл. Начинается сначала про vue, потом про build, потом про browserify, потом откуда-то vueify появляется, потом оказывается что это отдельная сборка сразу с ними и надо было сразу проект таким делать, потом начинаются какие-то модули, которых не разу в жизни не видел и не слышал, которые или не подключаются или не работают.

эмоции в спойлере

Современная документация начинает страдать хабровостью или научностью на мой взгляд, википедливостью - все написано для каких-то академиков, а пойди на улицу за Беларусь выступать - одни танцоры да крикуны, больше 3 слов никто не понимает, тогда для кого пишется, для себя что-ли? Ну то есть там не инструкция 1,2,3. Там инструкция вида 1 -> 1.1 -> 1.1.1 -> 1.1.1.1 -> 1.1.1.1.1 - а до два так я и не дошел, закапываясь в это чтение, которое в общем-то вообще уже не про мою задачу, а диалоги о рыбалке и поддержке мировыми браузерами и статистическими рассуждениями, для которых прилагаются десятки пакетов к установке, а зачем не ясно.

Выполняю npm run build, получаю /build/build.js - но подключение его через [script src] по прежнему не работает - то require не найден, то модуль кривой.

Проект запускается и работает отлично в npm run dev режиме на нужном порту.

Создавался проект по инструкции с официального сайта:
vue init webpack project-name

- доставил пару пакетов - роутер там, аксиос и мелочь всякая
- добавил webpack.config.js, которого там не было, дописал загрузчик для stylus.
больше никаких изменений не делал.

Я слышал, что в основном просто на сервере подымают инстанс node.js и запускают приложение на другом порту, а потом как-то прокидывают через докер или хотя бы nginx на 80-й порт и доменное имя.

А варианта скомпилировать для подключения в HTML файл нету? или не может быть?

Спасибо.

Comments

[WapSter]

Что же за документацию ты читал, интересно. Vue cli команда build компилирует в html + css + js. vuetify вообще библиотека компонентов, ее можно подключить в любой момент

[Григорий Васильков]

ну я гуглил как правило по запросам "convert vue to js", "build vue application" и подобным и в 60% случаев попадал на официальный сайт, где начинался рассказ про поддержку браузерами, про vueify + browserify, которые для меня то незнающего выглядят как "необходимые пакеты", а не как "в этом есть такое-то но можно и без него"

Answer 1

[Aetae]

Читай официальную документацию, а не хрен пойми что, vue init webpack не в ходу уже пару лет.
База без всякой сбоорки.
Vue-cli - создание проекта\сборка одной командой.

Comments

[Григорий Васильков]

Ссылки постить и я умею. И открывать. И даже гуглить. Не помогло, сколько не лайкай.
Ты можешь объяснить, как ты понимаешь эти штуки в режиме "вот это тебе пока не нужно", а вот "сюда нажми дважды".

Не буквально, но в общем случае. npm run dev работает, закончил проект, какие дальше мои действия?

[Антон Антон]

Григорий Васильков, npm run build, копирование всего содержимого папки dist туда, откуда веб сервер это будет раздавать

[Григорий Васильков]

Антон Антон, да, это верно. вопрос сможет ли PHP сервер после этого выдать HTML файл, в котором содержится [script src] который в [div id="app"] разместит приложение или мне в любом случае придется подымать сервер node.js, чтобы отдавать контент. Спасибо

[Антон Антон]

сможет. Но если не хочется страдать (не хватает знаний?), то лучше попробовать готовые решения типа laravel с его mix

Answer 2

[Владимир Коротенко]

Не знаю. У меня получается html, css и js
Все самодостаточно
Вот например
https://github.com/vkorotenko/calcxactive

Comments

[Григорий Васильков]

После того как вы закончили разработку на
npm run dev

Как вы превращаете его в самодостаточный js файл?
Хорошо, что у вас получается, как вы это делаете?

[Владимир Коротенко]

npm run build

[Григорий Васильков]

И потом вы можете создать index.html, написать [script src="build.js" /] и отдельно открыв в браузере index.html вы увидите приложение?

Или на проде все равно понадобится подымать node.js сервер на отдельном порту

[Владимир Коротенко]

Григорий Васильков, Данное конкретное приложение вообще ставится на флешку и запускается локально, кликом на html

Так заказчик захотел, впрочем оно будет так же работать и на любом веб сервере

[Григорий Васильков]

Ты ставил его через "vue create", правильно?

[Владимир Коротенко]

Григорий Васильков, Просто скопируйте репу

npm i
npm run build

Все, а создавал кажется через vue create

Answer 3

[Григорий Васильков]

Последний год использую symfony/encore и пишу обертку для php, которая читает файлы manifest.json, получая ссылку на них, вместо генераторов и билдеров, написанных разработчиками фреймворка.

Позволяет require и import любых библиотек, любые пресеты и препроцессоры, и все бонусы с этим связанные. И вообще сам Vue при этом необязателен, можно хоть из своих js файлов проект собрать.