linux运行vue编译后的项目方式
作者：李白~
这篇文章主要介绍了linux运行vue编译后的项目方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
如果你的 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 & //在后台可以运行
项目目录
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。