linux运行vue编译后的项目

news2024/11/27 22:33:09

如果你的 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 &  //在后台可以运行

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2248662.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

模拟实现Bash

模拟实现Bash 1.Bash基本认识2.Bash实现3.添加细节4.内置命令5.完整代码 🌟🌟hello,各位读者大大们你们好呀🌟🌟 🚀🚀系列专栏:【Linux的学习】 📝📝本篇内容…

sql注入报错分享(mssql+mysql)

mysql mysql的报错内容比较多 网上也有比较多的 这里重复的就不多介绍了。一笔带过 溢出类 bigint 当超过mysql的整形的时候,就会导致溢出,mysql可能会将错误信息带出。这里user()是字母默认为0 取反以后1可能就会导致异常。 报错特征 BIGINT UNSIG…

Hadoop3.3.6集群安装

Hadoop3.3.6 三节点集群安装 准备工作 准备三台机器,大小为4c8g,主节点为 8c16g。并需要保证网络连通性,每台机器都相互ping一下 1、关闭网络防火墙 # 查看网络防火墙状态 sudo systemctl status firewalld # 立即停止 firewalld sudo sy…

如何制作项目网页

一、背景 许多论文里经常会有这样一句话Supplementary material can be found at https://hri-eu.github.io/Lami/,这个就是将论文中的内容或者补充视频放到一个网页上,以更好的展示他们的工作。因此,这里介绍下如何使用前人提供的模板制作我…

JVM调优篇之JVM基础入门AND字节码文件解读

目录 Java程序编译class文件内容常量池附录-访问标识表附录-常量池类型列表 Java程序编译 Java文件通过编译成class文件后,通过JVM虚拟机解释字节码文件转为操作系统执行的二进制码运行。 规范 Java虚拟机有自己的一套规范,遵循这套规范,任…

已存大量数据的mysql库实现主从各种报错----解决方案(看评论)

背景何谓“先死后生”本文使用技术1、实施流程图2、实施2.1、数据库备份2.2、搭建Mysql的Master-Slave2.2.1、准备工作2.2.2、开始部署2.2.3、账号配置2.2.4、slave 同步配置2.2.5、验证 2.3、Master做数据恢复 结语 背景 计划对已有大量数据的mysql库的主从搭建,使…

数据结构 【双向哨兵位循环链表】

链表的结构分为8中,其实搞懂了单链表和双向哨兵位循环链表,这部分的知识也就掌握的差不多了。双向哨兵位循环链表的结构如下: 下面我从0构建一个双向哨兵位循环链表。 1、准备工作 构建节点结构体,双向循环链表的每一个…

高级AI记录笔记(五)

学习位置 B站位置:红豆丨泥 UE AI 教程原作者Youtube位置:https://youtu.be/-t3PbGRazKg?siRVoaBr4476k88gct素材自备 改良近战AI格挡行为 把近战AI的格挡行为从行为树中单独一个任务分块中给删除掉,因为我们希望敌人在受到伤害后立即进行…

彻底解决 macOS 下Matplotlib 中文显示乱码问题

彻底解决 macOS 下Matplotlib 中文显示乱码问题 在使用 Python 的 Matplotlib 库进行数据可视化时,中文字符的显示常常会出现乱码问题,尤其在 macOS 系统上。在网上找了一大堆方法,花了很久,发现不是要安装各种字体就是要改配置&…

11.25.2024刷华为OD

文章目录 HJ76 尼科彻斯定理(观察题,不难)HJ77 火车进站(DFS)HJ91 走格子方法,(动态规划,递归,有代表性)HJ93 数组分组(递归)语法知识…

突破性算法:让无人机集群在狭窄空间内穿针引线

导读 在建筑救援、森林搜索等任务中,无人机集群经常会遇到狭窄空间限制和动态障碍物变化等挑战。这些挑战会导致集群内部冲突,或在执行任务时因避让动态障碍物而导致系统混乱。实际应用场景和任务的严格特征往往使得全局搜索难以优化,而局部避…

Python中的简单爬虫

文章目录 一. 基于FastAPI之Web站点开发1. 基于FastAPI搭建Web服务器2. Web服务器和浏览器的通讯流程3. 浏览器访问Web服务器的通讯流程4. 加载图片资源代码 二. 基于Web请求的FastAPI通用配置1. 目前Web服务器存在问题2. 基于Web请求的FastAPI通用配置 三. Python爬虫介绍1. 什…

【Shell】运维快捷键及shell各种不同实际运维场景

一,控制台使用技巧 1,操作快捷键 Ctrlr :可以快速查找历史命令 Ctrll :可以清理控制台屏幕 Ctrla \ Ctrle :移动光标到命令行首\行尾 Ctrlw \ Ctrlk :删除光标之前\之后的内容 2,VIM文件编辑快捷键 快捷键ZZ :文件保存并退出 3&#xff…

SlickGrid复选框

分析 1、先在columns首列添加复选框; 2、在SlickGrid注册刚添加的复选框; 3、添加复选框变化事件; 4、注册按钮点击事件,点击获取已选中的行。 展示 代码 复选框样式(CSS) .slick-cell-checkboxsel {bac…

基于单片机的智慧小区人脸识别门禁系统

本设计基于单片机的智慧小区人脸识别门禁系统。由STM32F103C8T6单片机核心板、显示模块、摄像头模块、舵机模块、按键模块和电源模块组成。可以通过摄像头模块对进入人员人脸数据进行采集,识别成功后,舵机模块动作,模拟门禁打开,门…

【小白学机器学习33】 大数定律python的 pandas.Dataframe 和 pandas.Series基础内容

目录 0 总结 0.1pd.Dataframe有一个比较麻烦琐碎的地方,就是引号 和括号 0.2 pd.Dataframe关于括号的原则 0.3 分清楚几个数据类型和对应的方法的范围 0.4 几个数据结构的构造关系 list → np.array(list) → pd.Series(np.array)/pd.Dataframe 1 python 里…

Edge浏览器保留数据,无损降级退回老版本+禁止更新教程(适用于Chrome)

3 个月前阿虚就已经写文章告警过大家,Chromium 内核的浏览器将在 127 以上版本开始限制仍在使用 Manifest V2 规范的扩展:https://mp.weixin.qq.com/s/v1gINxg5vMh86kdOOmqc6A 像是 IDM、油猴脚本管理器、uBblock 等扩展都会受到影响,后续将无…

基于Spring Boot的装饰工程管理系统论文

摘 要 如今社会上各行各业,都喜欢用自己行业的专属软件工作,互联网发展到这个时候,人们已经发现离不开了互联网。新技术的产生,往往能解决一些老技术的弊端问题。因为传统装饰工程项目信息管理难度大,容错率低&#x…

路由器的工作原理

网络拓扑结构 主机A: IP地址:10.1.0.1/16 MAC地址:MACA 主机B: IP地址:10.2.0.1/16 MAC地址:MACB 网关G0/0/0: IP地址:10.1.0.2/16 MAC地址:MACC 网关G0/0/1&#…

【深度学习|特征增强模块】FFN(前馈神经网络)和E_FFN(增强型前馈神经网络)是transformer特征增强的重要组成部分!

【深度学习|特征增强模块】FFN(前馈神经网络)和E_FFN(增强型前馈神经网络)是transformer特征增强的重要组成部分! 【深度学习|特征增强模块】FFN(前馈神经网络)和E_FFN(增强型前馈神…