# Начало работы
Для создания приложения с отрисовкой на стороне сервера потребуется сначала установить пакет @vue/server-renderer :
npm install @vue/server-renderer ## ИЛИ yarn add @vue/server-renderer # Примечания
- Рекомендуется использовать Node.js версии 12+.
- Версии @vue/server-renderer и vue должны совпадать.
- @vue/server-renderer полагается на некоторые встроенные модули Node.js и поэтому может использоваться только с Node.js. В будущем возможно появится более простая сборка, которая сможет быть запущена и в других средах выполнения JavaScript.
# Отрисовка приложения Vue
В отличие от клиентского приложения Vue, которое создаётся с помощью createApp , приложение с SSR нужно создавать с использованием createSSRApp :
const createSSRApp > = require('vue') const app = createSSRApp( data() return user: 'Василий Пупкин' > >, template: `div>Текущий пользователь: < user >>div>` >) 1
2
3
4
5
6
7
8
9
10
Теперь, можно использовать функцию renderToString для отрисовки экземпляра приложения в строку. Она возвращает Promise, который разрешается отрисованным HTML.
const createSSRApp > = require('vue') const renderToString > = require('@vue/server-renderer') const app = createSSRApp( data() return user: 'Василий Пупкин' > >, template: `Текущий пользователь: >` >) const appContent = await renderToString(app) 1
2
3
4
5
6
7
8
9
10
11
12
13
# Интеграция с сервером
В этом руководстве для запуска приложения будет использоваться Express
npm install express ## ИЛИ yarn add express // server.js const createSSRApp > = require('vue') const renderToString > = require('@vue/server-renderer') const server = require('express')() server.get('*', async (req, res) => const app = createSSRApp( data() return user: 'Василий Пупкин' > >, template: `div>Текущий пользователь: < user >>div>` >) const appContent = await renderToString(app) const html = ` Мой первый заголовок
$appContent> ` res.end(html) >) server.listen(8080) 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
При запуске этого скрипта Node.js теперь сможем получить статичную HTML-страницу по адресу localhost:8080 . Но этот код ещё не гидратирован: Vue ещё не взял на себя управление статическим HTML, отправленным сервером, чтобы превратить его в динамический DOM, который может реагировать на изменения данных на стороне клиента. Это будет рассмотрено далее, в разделе гидратация клиентской части.
(opens new window)
Последнее обновление страницы: около 2 лет назад
Как открыть готовый проект на vue js?
У меня есть готовый проект на vue js. Мне нужно его открыть у себя на компьютере. Я попробовала его открыть через vui ui, однако мне вышла ошибка, что в проекте нет папки nоde_mоduls.
Буду очень благодарна именно за наводку куда смотреть и как гуглить, через что попробовать открыть, как попробовать запустить, система сборки может нужна какая-то. Потому что все объяснения при гуглении касаются того, как создать новый проект.
Код конечно же я вижу в vusual studiо, интересует именно запуск приложения.
- Вопрос задан более двух лет назад
- 1180 просмотров
5 комментариев
Простой 5 комментариев
Как запустить любой скачанный из GIT HUB проект VUE?
Я пока изучаю Vue по учебнику и скачал пример кода из книги, но как его запустить для редактирования? из того что нашлось на просторах:
Кроме этого, вы можете запустить пустой проект vuejs, добавить компоненты в ваш проект и импортировать их: import AndOr from './components/AndOr.vue' import Rule from './components/Rule.vue' А потом Vue.use('AndOr'); Vue.use('Rule'); До запуска приложения Vue перенес package.json далее запустил npm install далее npm run serve . и ошибок куча не запустился локал хост
Отслеживать
задан 4 мая 2021 в 13:14
15 7 7 бронзовых знаков
а в package.json что?
4 мая 2021 в 13:24
package.json также перекинул на пустой проект, и он не запустился
4 мая 2021 в 13:27
вот на первом скрине я приложил, ошибка такая есть — npm ERR! missing script: serve
4 мая 2021 в 13:31
@ЭддиВсё, нет. Свои писали заново, но тоже отличная практика. Возможно там есть другой скрипт, start или dev .
4 мая 2021 в 13:37
Нет. Зачем скачивать всякое, перепечатывать из книжек? Сами видите — оно не работает:) Больше проблем вызывает, чем обучает.
Как правильно запустить проект vue + node на сервере?
Новичок в этой теме, поэтому возникают некоторые банальные вопросы:
Я на локалке выполнил команду npm run build И получил папку dist с минифицированным проектом. Я закинул на сервер все файлы, а именно:
Запустить back-end на порт 3000 я смог путем команды: nodemon server/server.js
А как запустить vue? Я выполняю npm run dev, но запускается на порт 8080 и я подозреваю, что он запускается не из папки dist. Как запустить проект из папки dist (или я вообще несу чушь и эта папка не для этого )) ) чтобы он был доступен по корневой директории домена? Какие файлы и папки должны быть на сервере (исходя из тех, что на скрине)?
Кусок из package.json
«version»: «1.0.0»,
«private»: true,
«scripts»: «serve»: «vue-cli-service serve»,
«dev»: «npm run serve»,
«build»: «vue-cli-service build»,
«runw-pack»: «webpack»,
«lint»: «vue-cli-service lint»,
«start»: «nodemon server/server.js»
>,
- Вопрос задан более трёх лет назад
- 4896 просмотров
3 комментария
Простой 3 комментария
1. На сервер все файлы закидывать не надо. Собранный проект как раз-таки в папке dist.
2. «npm run dev» — это вы запускаете webpack dev server, который нужен исключительно для разработки.
3. Настройте какой-нибудь сервер, например Nginx, который будет обслуживать ваш фронт — и порядок.
P.S. Зачем серверную и клиентскую части запихали в один проект?
kr_ilya @kr_ilya Автор вопроса
Strannyk, это получается нужно клиент и сервер как два отдельных проекта делать. А на сервере их как размещать, в одной директории? (в моем случае root)