Как запустить сайт на Vue

Для начала нужно определить как вы хотите использовать хостинг. Вариантов два:

1. У вас нет проекта, и вы хотите начать его разрабатывать.
2. У вас есть готовый сайт на Vue.

У вас нет проекта, и вы хотите начать его разрабатывать.

Можно предположить, что раз Vue связан с javascript, то для его работы нужен вебсервер nodejs. Совсем не обязательно!

Более простым вариантом будет не использовать nodejs. Лучше использовать apache или nginx для раздачи статических файлов. Для этого можно выбрать специальный тип сайтов HTML.

1) Создадим новый сайт в панели управления:

• перейдите в раздел хостинг

• кликните на нужный контейнер

• кликните на кнопку “Добавить сайт”

• создайте новый сайт на HTML:

2) Откроем веб-терминал для работы с nodejs:

• перейдите в раздел хостинг

• кликните на нужный контейнер

• кликните на нужный сайт

• Перейдите во вкладку “Файлы”

• Нажмите кнопку “Терминал”

3) Создадим новый проект на vue:

• Введите команду cd app

• Далее вводим команду npm create vue@latest

• Далее заполняем данные по проекту

✔ Project name: - Вводим имя проекта
✔ Add TypeScript? … No / Yes - Выбираем нужна ли поддержка TypeScript
✔ Add JSX Support? … No / Yes - Выбираем нужна ли поддержка JSX
✔ Add Vue Router for Single Page Application development? … No / Yes - Выбираем нужна ли поддерживать роутинг
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

После заполнения всех данных перед Вами появится сообщение что проект создан.

Теперь чтобы проверить что проект работает наберите команды:

cd <имя_проекта>
npm install
npm run build

После этого загрузите содержимое папки dist в каталог имя_сайта/www

Для этого выполните команду rsync -avz dist/ ../../www

Теперь откройте в браузере https://имя_сайта.

Готово!

У вас есть готовый сайт на Vue.

Можно предположить, что раз Vue связан с javascript, то для его работы нужен вебсервер nodejs. Совсем не обязательно!

Более простым вариантом будет не использовать nodejs. Лучше использовать apache или nginx для раздачи статических файлов. Для этого можно выбрать специальный тип сайтов HTML.

Создадим новый сайт в панели управления:

• перейдите в раздел хостинг

• кликните на нужный контейнер

• кликните на кнопку “Добавить сайт”

• создайте новый сайт на HTML:

Теперь нужно посмотреть на папку с сайтом на вашем компьютере.

Есть ли там папка dist? Обычно проект на Vue выглядит так:

├── babel.config.js
├── dist ---нам нужно содержимое этой папки
├── jsconfig.json
├── node_modules
├── package.json
├── package-lock.json
├── public
├── README.md
├── src
└── vue.config.js

Если папки нет, попросите разработчика сгенерировать папку dist и передать ее вам.

Если вы разработчик, то создайте такую папку с сайтом, выполнив команду

npm run build

Подключитесь к хостингу по SFTP.

Загрузите весь проект в папку имя_сайта/app, после этого содержимое папки dist нужно скопировать в каталог имя_сайта/www

Теперь откройте в браузере https://имя_сайта.

Готово!