Vue с собственным серверным кодом на сервере (Node.js + Vue. js) - PullRequest
Новая
       91

Vue с собственным серверным кодом на сервере (Node.js + Vue. js)

0 голосов
/ 16 июня 2020

Итак ... для своей работы я делаю программное решение, которое помогает нашим сотрудникам иметь централизованное место для выполнения своей работы, поскольку мы перейдем на среду Microsoft 365 / Azure. Мы с коллегами решили использовать Vue. js как способ управления представлением приложений, тогда как Node.js обрабатывает серверную часть.

Что мы делаем:

  1. Единый вход через MSAL (это уже работает)
  2. Dynami c Загрузка модуля (это тоже работает, мы ' возможность загружать, обновлять, удалять бэкэнд-функции без перезагрузки сервера)

То, что мы ищем:

  1. Поскольку мы используем MSAL для единого входа, и этот код необходимо запускать на любой странице программного пакета, мы выбрали SPA, поскольку всегда существует один и тот же код, который необходимо запускать независимо от того, какой у вас URI, поэтому мы иметь 'главную страницу' , а отдельные приложения загружаются через Vue -маршрутизатор
  2. Способ динамического создания Vue -маршрутизатора в зависимости от списка добавляемых приложений.

Проблема:

А теперь, когда я дал некоторую информацию Мы наконец переходим к той части, где я задаю вопрос.

Из-за ограничений, наложенных на нас вышестоящими структурами, мы получаем только 1 порт (порт 443), это означало, что (по то, что мы могли найти в Интернете), что о Vue -cli практически не может быть и речи, поскольку у нас есть собственный внутренний код, который также нужно запускать. Это означает, что наш собственный внутренний сервер должен обслуживать страницы vue, поэтому теряется часть функциональности, которую мы получаем от Vue -cli.

При этом мы заставили Vue -маршрутизатор работать с помощью используя библиотеку CDN в нашем тестировании, но это связано с тем, что мы не можем получить доступ к данным от родительского элемента, а это то, к чему нам нужно иметь доступ, поскольку нам нужно иметь возможность использовать код верхнего уровня для наших запросы на получение данных.

Итак, для фактического вопроса:

  1. Есть ли способ использовать Vue -cli И свой собственный внутренний код на том же Узловой процесс?
  2. Если нет, как мы можем использовать Vue -router и Vue -компоненты и получить доступ к родительским данным без использования Vue -cli для создания нашего приложения для нас?

По обоим этим вопросам мы не смогли найти никаких результатов, ища их сами, и не смогли добиться этого, создав собственный код (мы все довольно новички в Vue, так что мы еще не знаем всех тонкостей).

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

1 Ответ

0 голосов
/ 16 июня 2020

Как прокомментировал Ифаруки, результатом использования vue -cli в итоге является папка dist. В папке есть index.html и все файлы, например js и css, которые необходимы для запуска внешнего интерфейса.

Как вы будете обслуживать этот index.html, в конце концов, зависит от вас, поэтому, например, если ваш бэкэнд запускает Express, вы можете создать свою Vue -dist-folder где-нибудь в вашем Express приложение может связаться с ним и обслуживать его, когда пользователь пытается его достичь. 

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

Это будет обслуживать страницу, когда пользователь ПОЛУЧИТЬ / route. Это простой пример, но это общая идея.

Другой вариант - запустить Vue Nuxt вместо Vue. Nuxt - это серверный фреймворк, использующий Vue. Это означает, что вы можете встроить его больше в бэкэнд и, возможно, разделить на пространство имен / web и / api для маршрутов.

Поскольку обычно невозможно запустить два процесса на одном и том же порту, это решение единственный, о котором я могу думать.

...