Как на Vite сгенерировать приложение в виде виджета для сторонних сайтов?

Question

[mrFlyer]

Приветствую! Пробую освоить Vite после WebPack и не могу решить вроде как тривиальную проблему.

Пишу виджет на Vue который можно установить любой другой сайт.

<div id="widget-app" data-config="{....}"></div>
<script type='text/javascript' src="https://domain.com/app.js"></script>

Когда на Vite делаю сборку в режиме dev он мне предлагает проводить отладку по Host:port, а мне же нужна сборка которую я смогу подключить в любой html файл.

Answer 1

[WapSter]

Наверное дока отсутствует.
https://vitejs.dev/guide/build.html вроде есть

Comments

[mrFlyer]

Ну так это build. А вопрос по npm run dev

Он в таком случае держит сборку оперативке где то. В папке dist изменения не происходят.

[WapSter]

mrFlyer,

Когда на Vite делаю сборку в режиме dev он мне предлагает проводить отладку по Host:port, а мне же нужна сборка которую я смогу подключить в любой html файл.

ты определись для начала, что тебе нужно

[mrFlyer]

WapSter,

Мне нужно через Vite запустить npm run dev и на выходе должен получиться JS файл. Далее например я на рабочем столе создаю файлик html и там подключаю этот app.js и наблюдаю результат работы vue.

Далее, я внес изменение в vue, vite пересобрал проект и обновил app.js. Я обновляю html файл в браузере и вижу изменения.

[WapSter]

mrFlyer, то что ты хочешь в vite не предусмотрено. Пересобирай после обновления кода. Этот процесс можно автоматизировать сторонним софтом я использовал WebStorm как именно уже не помню

Answer 2

[Khamzabek]

Для того чтобы собрать проект в режиме Production и получить файлы, которые можно загружать на любой сайт, нужно использовать команду `npm run build` для Vite.

Эта команда соберет проект в папку `dist` и создаст оптимизированные файлы для продакшн, которые можно загрузить на любой сайт с помощью тега `script`.

Например:

```
<div id="widget-app" data-config="{....}"></div>
<script type='text/javascript' src="https://domain.com/app.js"></script>

```

если вы предполагаете, что ваш файл будет расположен на `https://domain.com/app.js`, тогда созданный Вами файл нужно поместить в папку сопоставимо с `https://domain.com/`, и назвать файл `app.js`.

Когда вы загрузите html-код на ваш сайт и добавите эту строку кода, ваш виджет должен работать.

Comments

[mrFlyer]

Да, верно. Но как быть если я не в production режиме? А в режиме разработки?

[Khamzabek]

Если вы находитесь в режиме разработки, то вы можете использовать команду npm run dev для запуска проекта в режиме разработки. Но чтобы загрузить файлы на другой сайт, вам нужно сначала собрать проект в режиме Production, как описано выше.

Если нужно загрузить проект на локальный сервер для тестирования, то вам нужно запустить локальный сервер с помощью команды npm run serve и перейти по адресу, который будет указан после запуска сервера. Обычно это http://localhost:port, где port - порт, указанный в настройках проекта.

[mrFlyer]

Khamzabek, спасибо. тогда получается вебпаком проще все это реализовать.