Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

1.1K
Visualizações
vue-cli: dist/js/ is not found in website source

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:

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')
over 4 years ago · Santiago Trujillo
1 Respostas
Responde à pergunta

0

These are the steps I would take.

First, Move your server folder to your public, that way your servers files are included in your dist build. You may need to update routes/path etc. This can also be done using publicPath https://cli.vuejs.org/config/#baseurl. Alternatively, you can edit your vue.config.js and tell webpack to load additional directories into your dist build, however I am not sure if webpack needs to be involved in building your server, I could be wrong Im not sure about your specific setup. https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling

Next, run npm run build to build your dist directory.

Then run npm install -g serve and serve your production build using serve -s dist

Source: https://cli.vuejs.org/guide/deployment.html#general-guidelines

over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda