【发布时间】：2022-01-16 18:52:59
【问题描述】：
问题：我正在使用 vue-CLI 构建一个网站。当我使用npm run serve 运行开发服务器时，一切都以应有的方式显示。运行npm run build 后，将创建一个/dist 文件夹。然后在运行npm start 并启动localhost 服务器时，在网站源中，而不是dist/js 中的所有js 文件仅显示app.d574a975.js（但是所有其他js 文件都存在于本地/dist 目录中），因此，当访问localhost:5000（我的端口是5000）时，我收到localhost/:1 GET http://localhost:5000/js/chunk-vendors.3fcb4836.js/ net::ERR_ABORTED 404 (Not Found) 错误并且页面变为空白。有没有办法来解决这个问题？我是 Web 开发的新手，因此我将不胜感激。
可能很重要：
- 我已经尝试将它部署在本地主机上，并且效果很好。但是，然后我尝试添加中间件来处理
404错误，从那时起，该应用程序一直表现不佳并在控制台中打印出上述错误。 - 我尝试通过使用
vue create重新创建 vue 应用程序、重新安装相同的依赖项并从原始项目复制粘贴代码来从头开始重建应用程序。由于某些未知原因，它运行良好，dist/js包含所有文件。
项目文件夹架构：
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')
【问题讨论】：
-
看起来您的
distintegration 出了问题。你看过这个相关的问题吗？ stackoverflow.com/questions/52229626/… -
@TKsomewhat 我已经调查过了，尝试使用serveStatic而不是express.static，但
404问题仍然存在 -
首先我推荐使用 vite 而不是 webpack 进行开发，因为它要快得多。您是否也尝试过完全进行新设置？我也不是节点专家，但在使用节点运行 Vue 时从来没有遇到过问题。
-
@TKsomething 让一切从头开始的好点，但我仍然想了解为什么我当前的项目会如此不正确地工作。另外，谢谢，我可能会切换到 Vite，因为 webpack 存在这种问题。
-
尝试在所有 API 路由之前移动静态服务路由。您还可以分享 vue.config.js 的文件内容吗
标签： javascript node.js vue.js webpack