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. Also, when trying to run npm run build
warnings are being printed out in the console about some files exceeding the file limit (maybe that's why some files are not being displayed in website source?):
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')
from vue-cli: dist/js/ is not found in website source
No comments:
Post a Comment