Как создать два раздельных приложения vue в Laravel?

Question

[vlog]

Думаю, для многих ситуация знакомая:
есть сайт организации с информацией, который индексируется поисковыми системами и есть личный кабинет, который предоставляет довольно-таки широкий функционал.
Не исключаю, что у меня сейчас каша в голове, но пытаюсь понять, как можно эти две части разделить на два приложения, для того чтобы сам сайт долго не грузился. Пока верстаю сам сайт в blade-шаблонах, а лк во vue, но хотелось бы рассмотреть реализацию сайта на vue, но в качестве отдельного от ЛК приложения.
В документации Inertia ничего про это не нашел, к сожалению. Или не там искал...

Пользуетесь ли практикой подобного деления и насколько целесообразно использовать vue для верстки информационных разделов сайта, где важна скорость загрузки?

Answer 1

[Sanes]

Проблема в чем? Сделай два шаблона. Один для админки, другой для фронта.

Comments

[vlog]

А как Inertia будет их различать?

[vlog]

В документации Inertia написано о монолитных приложениях.
Скорее всего, я неверно понимаю как это работает под капотом... У меня сложилось мнение что раз приложение одностраничное, то в ответ клиенту вкладывается больше данных, чем если бы возвращалась одна страница. Соответственно оно дольше загружается из-за этого, поэтому я и хочу отделить информационный сайт от личного кабинета, чтобы не подгружать лишнее, но продолжать использовать Vue.
Возможно я просто что-то не понимаю.

[Sanes]

vlog, у тебя будет не только 2 шаблона, но и 2 приложения. Со своими роутами, контроллерами и т.д.

Answer 2

[UksusoFF]

Создаешь новый конфиг vue.config.admin.js c указанием другого entry:

const path = require('path');

module.exports = {
  publicPath: '/',
  outputDir: path.resolve(__dirname, '../public/front/admin'),
  filenameHashing: false,
  css: {
    extract: true,
  },
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.join(__dirname, 'src'),
      },
    },
    entry: {
      app: path.join(__dirname, 'src', 'admin/app.ts'),
    },
  },
};

Добавляешь в package.json:

"scripts": {
    "build:app": "env VUE_CLI_SERVICE_CONFIG_PATH=\"$PWD/vue.config.js\" vue-cli-service build",
    "build:auth": "env VUE_CLI_SERVICE_CONFIG_PATH=\"$PWD/vue.config.admin.js\" vue-cli-service build",
    "build": "npm run build:app && npm run build:auth",
  },

Таким образом в src/admin можно складировать все что относится к ЛК, а само приложение в src. При этом можно шарить компоненты между ними.