如果你的 Vue 项目使用了 history 模式(而非默认的 hash 模式),在纯静态服务器中会出现类似的问题。因为 Vue Router 的 history 模式要求所有未匹配的路径都重定向到 index.html,以便 Vue 前端处理路径。
首先在本地执行npm run build编译项目,会生成一个dist的项目源码文件
1.创建一个简单的 HTTP 服务器: 修改你的 server.js,确保所有未匹配的请求都返回 index.html。
const http = require('http');
const fs = require('fs');
const path = require('path');
const PORT = 14515;
http.createServer((req, res) => {
let filePath = path.join(__dirname, req.url === '/' ? '/index.html' : req.url);
fs.readFile(filePath, (err, data) => {
if (err) {
// 如果文件不存在,返回 index.html
fs.readFile(path.join(__dirname, 'index.html'), (err, indexData) => {
if (err) {
res.writeHead(500, { 'Content-Type': 'text/plain' });
res.end('500 Internal Server Error');
} else {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(indexData);
}
});
} else {
// 返回找到的文件
const ext = path.extname(filePath).toLowerCase();
const mimeTypes = {
'.html': 'text/html',
'.js': 'application/javascript',
'.css': 'text/css',
'.json': 'application/json',
'.png': 'image/png',
'.jpg': 'image/jpg',
'.gif': 'image/gif',
'.svg': 'image/svg+xml',
};
res.writeHead(200, { 'Content-Type': mimeTypes[ext] || 'application/octet-stream' });
res.end(data);
}
});
}).listen(PORT, () => {
console.log(`Server running at http://0.0.0.0:${PORT}/`);
});
2.运行: 在 dist 目录下启动服务器:
node server.js
nohup node server.js & //在后台可以运行
项目目录