How to use multiple SPA applications with Vue CLI?

Question

Vue.js

It is necessary to split the application into two separate SPA applications.
There is a main application and an admin panel for it.
In vue.config.js described 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',
},

When I run npm run serve, I can just navigate to localhost:8080/admin and get into the admin.
The build (npm run build) creates two .html files in dist, index.html and admin.html.
And in this case, when I go to /admin, I get 404.

How to properly implement Multi SPA in Vue CLI.
Or is it better to separate them into completely different Vue applications altogether?

Answer 1

The build (npm run build) creates two .html files in dist, index.html and admin.html.
And in this case, when I go to /admin, I get a 404.

Apparently, you need to configure the web server to return the correct html file.
nginx for SPA, for example, is configured to return index.html for any path.
You need something like this:

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;
  }
}

Links from the main app to admin must be links, not router-links (and vice versa)
The router instance in admin must have the base: '/admin/'.