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

项目目录

总结

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

相关文章

  • Apache NameVirtualHost *:80 has no VirtualHosts问题解决办法

    Apache NameVirtualHost *:80 has no VirtualHosts问题解决办法

    这篇文章主要介绍了Apache NameVirtualHost *:80 has no VirtualHosts问题解决办法,一个很简单的配置性错误,需要的朋友可以参考下
    2014-08-08
  • Linux下使用SSH远程执行命令方法收集

    Linux下使用SSH远程执行命令方法收集

    这篇文章主要介绍了Linux下使用SSH远程执行命令方法收集,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • CentOS添加和删除用户以及用户组的方法

    CentOS添加和删除用户以及用户组的方法

    本篇文章主要介绍了CentOS添加和删除用户以及用户组的方法,具有一定的参考价值,有兴趣的可以了解一下
    2017-09-09
  • 详解在 CentOS 6.x上安装 docker.io

    详解在 CentOS 6.x上安装 docker.io

    这篇文章主要介绍了在 CentOS 6.x上安装 docker.io成功,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-01-01
  • Centos7 利用LVM实现动态扩容的方法

    Centos7 利用LVM实现动态扩容的方法

    本篇文章主要介绍了Centos 7 利用LVM实现动态扩容的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • Linux物理机区分SSD与HDD的常见方法

    Linux物理机区分SSD与HDD的常见方法

    在 Linux 系统中,我们经常需要确认一块硬盘究竟是 固态硬盘 (SSD) 还是 机械硬盘 (HDD),以便做合理的存储规划和性能评估,本文给大家介绍了Linux物理机区分SSD与HDD的常见方法,需要的朋友可以参考下
    2025-09-09
  • Linux 系统双网卡绑定配置实现

    Linux 系统双网卡绑定配置实现

    这篇文章主要介绍了Linux 系统双网卡绑定配置实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • 使用FileZilla从Linux系统下载文件的方法

    使用FileZilla从Linux系统下载文件的方法

    最近做项目,遇到这样的需求,要求将Linux系统的的某个文件夹下载到我Windows系统某个文件夹里,怎么实现这个功能呢?下面脚本之家小编给大家带来了使用FileZilla从Linux系统下载文件的方法,感兴趣的朋友一起看看吧
    2018-07-07
  • 关于crontab定时任务命令解读

    关于crontab定时任务命令解读

    这篇文章主要介绍了关于crontab定时任务命令的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • Linux中split大文件分割和cat合并文件详解

    Linux中split大文件分割和cat合并文件详解

    这篇文章主要给大家介绍了关于Linux中split大文件分割和cat合并文件的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-07-07

最新评论