当前位置: 首页 > news >正文

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.htmlfs.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.jsnohup node server.js &  //在后台可以运行

项目目录
在这里插入图片描述

http://www.lryc.cn/news/492276.html

相关文章:

  • 论文阅读:A Software Platform for Manipulating theCamera Imaging Pipeline
  • 【MySQL篇】持久化和非持久化统计信息的深度剖析(第一篇,总共六篇)
  • Ubuntu下安装Qt
  • 丹摩征文活动 | AI创新之路,DAMODEL助你一臂之力GPU
  • 数据库(总结自小林coding)|索引失效的场景、慢查询、原因及如何优化?undo log、redo log、binlog 作用、MySQL和Redis的区别
  • Docker容器运行CentOS镜像,执行yum命令提示“Failed to set locale, defaulting to C.UTF-8”
  • OpenCV基本图像处理操作(六)——直方图与模版匹配
  • 【LLM学习笔记】第四篇:模型压缩方法——量化、剪枝、蒸馏、分解
  • python3 自动更新的缓存类
  • 英语知识网站开发:Spring Boot框架应用
  • 文件上传upload-labs-docker通关
  • git(Linux)
  • Doris实战—构建日志存储与分析平台
  • 【vue3+Typescript】unapp+stompsj模式下替代plus-websocket的封装模块
  • Tcon技术和Tconless技术介绍
  • C#-利用反射自动绑定请求标志类和具体执行命令类
  • 高中数学练习:初探均值换元法
  • 数据结构单链表,顺序表,广义表,多重链表,堆栈的学习
  • 【保姆级教程】使用lora微调LLM并在truthfulQA数据集评估(Part 2.在truthfulQA上评估LLM)
  • thinkphp中对请求封装
  • leetcode hot100【LeetCode 215.数组中的第K个最大元素】java实现
  • 簡單易懂:如何在Windows系統中修改IP地址?
  • Python中的23种设计模式:详细分类与总结
  • 日历使用及汉化——fullcalendar前端
  • 视频截断,使用 FFmpeg
  • 使用系统内NCCL环境重新编译Pytorch
  • 1. Klipper从安装到运行
  • docker 卸载与安装
  • 跨部门文件共享安全:平衡协作与风险的关键策略
  • 基于单片机的智慧小区人脸识别门禁系统