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

Posted 2023-02-22

【中文标题】vue-cli：在网站源代码中找不到 dist/js/

【英文标题】：vue-cli: dist/js/ is not found in website source

【发布时间】：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)

ma​​in.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 出了问题。你看过这个相关的问题吗？ ***.com/questions/52229626/…

@TKsomewhat 我已经调查过了，尝试使用serveStatic而不是express.static，但404问题仍然存在

首先我推荐使用 vite 而不是 webpack 进行开发，因为它要快得多。您是否也尝试过完全进行新设置？我也不是节点专家，但在使用节点运行 Vue 时从来没有遇到过问题。

@TKsomething 让一切从头开始的好点，但我仍然想了解为什么我当前的项目会如此不正确地工作。另外，谢谢，我可能会切换到 Vite，因为 webpack 存在这种问题。

尝试在所有 API 路由之前移动静态服务路由。您还可以分享 vue.config.js 的文件内容吗

【参考方案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