Как запустить фронт и бэк на одном адресе?

Question

[dfhkjhg]

Когда я запускаю серверную часть на localhost:5000 и фрон на vue на localhost:8080 то все работает. Но как сделать так чтобы фронт и бэк были на localhost:8080?

Answer 1

[Aetae]

Если тебе это нужно для разработки - то тебе это не нужно.)
Используй webpack devserver(из коробки в vue-cli) и настрой proxy до бэка. Для фронта всё будет "на одном сервере" и не нужно никаких заморочек.

Comments

[dfhkjhg]

Возможно тупой вопрос(100% тупой). (фрон у меня на vuex) и лучше установить webpack и переписать некоторые моменты или добавить vue-cli?

[Aetae]

dfhkjhg, Vuex - это всего лишь плагин для для vue. М.б. ты имел ввиду Nuxt?

[dfhkjhg]

Aetae, наверное я имел ввиду просто vue c плагином vuex. Но vue-cli вроде как там нет. (я прост ток начал в этом разбираться и не оч пока что все понимаю)

[Aetae]

dfhkjhg, vue должен кто-то собирать(хотя есть и встраиваемая версия - но это для извращенцев). Стандарт - это vue cli для обычных задач и webpack для тонкой настройки. Но есть множество других, менее популярных, вариантов.
Как ты ведёшь разработку? Используешь ли .vue файлы? Есть у тебя в корне package.json? Если есть что там у тебя в поле "scripts"?

[dfhkjhg]

package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.4.2",
    "vuex": "^3.5.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.4.0",
    "@vue/cli-service": "~4.4.0",
    "vue-template-compiler": "^2.6.11"
  }
}

Проект просто создан через vue create дальше были уже добавлены роуты и vuex.

Вот так это выглядит

[Aetae]

dfhkjhg,

"serve": "vue-cli-service serve",

Ты используешь vue-cli.
Тебе просто надо, именно как и написано по приведённой мной выше ссылке, создать файл vue.config.js с содержимым

module.exports = {
  devServer: {
    proxy: 'http://localhost:5000'
  }
}

или просто добавить

devServer: {
  proxy: 'http://localhost:5000'
},

если он уже существует.

[dfhkjhg]

Aetae, спасибо)

Answer 2

[Иван Шумов]

Поставьте перед ними nginx и разведите на разные роуты