linux运行vue编译后的项目方式

 更新时间:2026年03月23日 08:45:46   作者:李白~  
这篇文章主要介绍了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 &  //在后台可以运行

项目目录

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 详解ssh免密码登录配置方法(图示加命令)

    详解ssh免密码登录配置方法(图示加命令)

    这篇文章主要介绍了详解ssh免密码登录配置方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • Ubuntu18.04配置静态IP和动态IP过程

    Ubuntu18.04配置静态IP和动态IP过程

    文章介绍了在Ubuntu 18.04系统中配置静态IP和动态IP的方法,配置静态IP时,需要编辑netplan文件并设置静态IP、网关等信息,然后使用`sudonetplanapply`命令使配置生效,配置动态IP时,只需确保netplan文件中的配置支持DHCP,并使用相同命令使配置生效
    2026-02-02
  • 双系统电脑中把Ubuntu装进外接移动固态硬盘的全过程

    双系统电脑中把Ubuntu装进外接移动固态硬盘的全过程

    这篇文章主要介绍了如何在Windows 11系统中使用VMware 17创建虚拟机,并在虚拟机中安装Ubuntu 22.04桌面版或Ubuntu 20.04,文章还列举了一些常见的安装错误及其解决方法,需要的朋友可以参考下
    2025-05-05
  • linux 后台日志 mysql 错误异常的解释(推荐)

    linux 后台日志 mysql 错误异常的解释(推荐)

    下面小编就为大家带来一篇linux 后台日志 mysql 错误异常的解释(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • Linux命令行上如何使用日历详解

    Linux命令行上如何使用日历详解

    这篇文章主要给大家介绍了Linux命令行上如何使用日历的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用linux具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-04-04
  • Linux MySQL忘记root密码解决方案

    Linux MySQL忘记root密码解决方案

    这篇文章主要介绍了Linux MySQL忘记root密码解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • apache配置访问站点下所有文件的实现

    apache配置访问站点下所有文件的实现

    本文主要介绍了配置Apache服务器以实现对根目录下目录的访问控制,包括无限制访问和有限制访问,具有一定的参考价值,感兴趣的可以了解一下
    2025-03-03
  • 手把手教你在腾讯云上搭建hadoop3.x伪集群的方法

    手把手教你在腾讯云上搭建hadoop3.x伪集群的方法

    这篇文章主要介绍了手把手教你在腾讯云上搭建hadoop3.x伪集群的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • Centos6.5全自动安装 vsftpd+dhcp+nfs+tftp

    Centos6.5全自动安装 vsftpd+dhcp+nfs+tftp

    本文主要记述了在Centos6.5中,如何配置无人值守安装vsftpd+dhcp+nfs+tftp,非常实用,希望对大家能有所帮助。
    2014-09-09
  • Linux通过设备号找到设备的方法

    Linux通过设备号找到设备的方法

    所有的Linux设备文件均位于/dev目录下,是根(/)文件系统的一个组成部分,因为这些设备文件在操作系统启动过程中必须可以使用。接下来通过本文给大家介绍Linux通过设备号找到设备的方法,感兴趣的朋友一起看看吧
    2018-07-07

最新评论