Vue.js+Node.js线上部署时JS与CSS文件出现404错误求助

我的Vue.js + Node.js应用本地运行正常，但部署到线上服务器后，JavaScript和CSS文件出现404错误。已确认文件存在于线上服务器的正确目录，调整过index.html中的文件路径，仍无法访问。

相关代码 #

client/dist/index.html #

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
    <script type="module" crossorigin src="/assets/index-2b384caf.js"></script>
    <link rel="stylesheet" href="/assets/index-d1b70ef7.css">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

server/server.js #

const express = require('express');
const cors = require('cors');
const routes = require('./routers');


const app = express();

const path = require('path');

// Serve static files from the Vue.js client build
app.use(express.static(path.join(__dirname, '../client/dist')));

app.use(express.json());

app.use(cors());

app.use('/api', routes);

// For any other routes, serve the Vue.js app
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../client/dist/index.html'));
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

已完成的检查 #

• 线上服务器中文件存在于正确目录
• index.html中的文件路径已结合服务器目录结构调整正确
• 服务器已配置从client目录提供静态文件服务
• 已清除浏览器缓存并尝试在无痕窗口访问

排查与解决建议 #

1. 验证静态文件中间件顺序与干扰 #

Express中间件按顺序执行，当前express.static的位置是正确的（在路由和*捕获路由之前），但需确认线上环境是否有其他中间件（如认证、日志中间件）在静态中间件之后拦截了静态资源请求，排查是否有额外的app.use语句影响资源访问。

2. 检查线上文件权限 #

线上服务器的静态文件可能存在权限问题，导致Node.js进程无法读取。执行命令修改权限（替换为你的实际项目路径）：

sudo chmod -R 755 /var/www/your-project/client/dist
sudo chown -R www-data:www-data /var/www/your-project/client/dist

根据服务器运行用户调整www-data为实际用户（如node或你的用户名）。

3. 确认Vite构建的基础路径配置 #

若应用部署在子路径下（如https://your-domain.com/app），需在vite.config.js中设置base选项：

// client/vite.config.js
export default {
  base: '/app/' // 根路径则用'/'
}

重新构建后部署，确保index.html中的资源路径匹配实际部署路径。

4. 直接测试静态资源访问 #

在服务器上用curl测试静态资源是否能正常返回：

curl http://localhost:3000/assets/index-2b384caf.js

若返回404，说明静态中间件映射有误；若返回文件内容，需排查反向代理（如Nginx）的配置问题。

5. 排查反向代理配置（若使用） #

如果线上用了Nginx等反向代理，可直接让Nginx托管静态文件提升性能，同时确保代理规则正确：

server {
  listen 80;
  server_name your-domain.com;

  location /assets/ {
    root /var/www/your-project/client/dist;
    expires 30d;
  }

  location /api/ {
    proxy_pass http://localhost:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }

  location / {
    proxy_pass http://localhost:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

6. 确认线上路径解析正确性 #

在server/server.js中添加日志打印静态文件实际路径，验证是否指向正确目录：

const staticPath = path.join(__dirname, '../client/dist');
console.log('Static files path:', staticPath);

启动服务后查看日志，确认路径是否与线上实际目录一致。

内容的提问来源于stack exchange，提问作者Eva Glaude