vue-cli: dist/js/ is not found in website source

Question

Problem: I'm building a website with vue-CLI. When I run the dev server with npm run serve everything displays the way it should. After running npm run build a /dist folder is being created. Then when running npm start and starting the localhost server, in website source, instead of all js files in dist/js only app.d574a975.js is being shown (however all other js files are present in /dist directory locally) and, therefore, when accessing localhost:5000 (my port is 5000) I'm getting localhost/:1 GET http://localhost:5000/js/chunk-vendors.3fcb4836.js/ net::ERR_ABORTED 404 (Not Found) error and the page goes blank. Is there a way to fix this? I'm quite new to web development, so I will appreciate any help.

May be important:

• I've already tried deploying it on the localhost and it worked just fine. However, then I tried adding middleware to handle the 404 error and since then the app has been misbehaving and printing out the above-mentioned error in the console.
• I've tried rebuilding the app from ground up by recreating vue app with vue create, reinstalling same dependencies and copypasting the code from original project. And for some unknown reason it worked just fine, the dist/js had all files in it.

Project folder architecture:

server.js:

const express = require('express')
const mongoose = require('mongoose')
const morgan = require('morgan')
const path = require('path')
const rateLimit = require('express-rate-limit')

let app = express();
const port = 5000;

const limiter = rateLimit({
    windowMs: 10 * 60 * 1000,
    max: 300 
})
app.use(limiter)
app.set('trust proxy', 1)

app.use(express.json())
app.use(express.urlencoded({extended: false}))
app.use(morgan('dev'))
app.use('/api/hometasks', require('./api/hometask'))
app.use('/api/auth', require('./api/auth'))
app.use('/api/groups', require('./api/groups'))
app.use('/', express.static(path.join(__dirname, '../dist/')))
app.listen(port)

main.js

import { createApp } from 'vue/dist/vue.esm-bundler';
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Main from './components/corepages/main.vue'
import PageNotFound from './components/infopages/pageNotFound.vue'

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {path: '/', component: Main},
        {path: '/:pathMatch(.*)*', component: PageNotFound}
    ]
})

const app = createApp(App)
app.use(router)
app.mount('#app')

Answer 1

2022/03 I had this issue with vue3 cli default setup: if you run "npm run build", you get a nice /dest folder with an index.html and correct sub folders. But the js source links go for absolute path /, so this WORKS ONLY IN THE ROOT DIRECTORY of a webserver.

See https://cli.vuejs.org/config/#publicpath

"By default, Vue CLI assumes your app will be deployed at the root of a domain, e.g. https://www.my-app.com/. If your app is deployed at a sub-path, you will need to specify that sub-path using this option. For example, if your app is deployed at https://www.foobar.com/my-app/, set publicPath to '/my-app/'."