vue-cli：在网站源代码中找不到 dist/js/

Question

问题：我正在使用 vue-CLI 构建一个网站。当我运行开发服务器时，npm run serve所有内容都按其应有的方式显示。运行后将创建npm run build一个文件夹。/dist然后，当运行npm start并启动本地主机服务器时，在网站源中，而不是仅dist/js显示app.d574a975.js所有 js 文件（但是所有其他 js 文件都存在于/dist本地目录中），因此，当访问localhost:5000（我的端口是5000）时，我得到localhost/:1 GET http://localhost:5000/js/chunk-vendors.3fcb4836.js/ net::ERR_ABORTED 404 (Not Found)错误并且页面变为空白。有没有办法来解决这个问题？我对网络开发很陌生，所以我将不胜感激任何帮助。

可能很重要：

• 我已经尝试将它部署在本地主机上，并且运行得很好。但是，然后我尝试添加中间件来处理该404错误，从那时起该应用程序一直表现不佳并在控制台中打印出上述错误。
• 我尝试通过使用 重新创建 vue 应用程序vue create、重新安装相同的依赖项并复制粘贴原始项目中的代码来从头开始重建应用程序。由于某种未知的原因，它工作得很好，dist/js里面有所有文件。

项目文件夹架构：

服务器.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

这些是我将采取的步骤。

首先，将您的服务器文件夹移动到您的public，这样您的服务器文件就会包含在您的dist构建中。您可能需要更新路由/路径等。这也可以使用publicPath https://cli.vuejs.org/config/#baseurl来完成。或者，您可以编辑vue.config.js并告诉 webpack 将其他目录加载到您的 dist 构建中，但是我不确定 webpack 是否需要参与构建您的服务器，我可能是错的我不确定您的具体设置。https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling

接下来，运行npm run build以构建您的 dist 目录。

然后npm install -g serve使用以下命令运行并服务您的生产构建serve -s dist

来源： https: //cli.vuejs.org/guide/deployment.html#general-guidelines