Как с Vue CLI использовать несколько SPA приложений?

Question

[Дмитрий Шелыгин]

Необходимо разделить приложение на два отдельных SPA приложения.
Имеется основное приложение и админка к нему.
В vue.config.js описал pages

pages: {
    index: {
        entry: 'src/apps/app/main.js',
        template: 'public/index.html',
        filename: 'index.html',
        title: process.env.VUE_APP_NAME || 'Application'
    },
    admin: 'src/apps/admin/main.js',
},

При запуске npm run serve я могу просто перейти по адресу localhost:8080/admin и попадаю в админку.
При сборке (npm run build) в dist создаются два .html файла, index.html и admin.html.
И в данном случае, при переходе на /admin, я получаю 404.

Как правильно реализовать Multi SPA во Vue CLI.
Или лучше вообще разделить их на полностью разные Vue приложения?

Answer 1

[Андрей Хохлов]

При сборке (npm run build) в dist создаются два .html файла, index.html и admin.html.
И в данном случае, при переходе на /admin, я получаю 404.

Судя по всему, необходимо настроить веб-сервер на отдачу правильного html файла.

nginx для SPA, например, настраивается так, чтобы по любым путям отдавать index.html

Вам нужно что-то вроде этого:

server {
  listen 80;

  location /admin {
    root   /usr/share/nginx/html;
    index  admin.html
    try_files $uri $uri/ /admin.html;
  }

  location / {
    root   /usr/share/nginx/html;
    index  index.html
    try_files $uri $uri/ /index.html;
  }
}

Ссылки из основного приложения в admin должны быть ссылками, а не router-link (и наоборот)
Инстанс роутера в admin должен иметь опцию base: '/admin/'.