自学内容网 自学内容网
自学内容网 > 正文

云服务器部署vite前端项目

🕗 发布于 2024-07-25 21:41 服务器  前端  vite  前端部署  前端框架  

本篇博客将详述眨眼睛部署前端项目遇到的问题和解决方法

  1. 打包vite项目

输入指令会生成一个dist文件夹

npx vite build

在这里插入图片描述

如果我们使用liveServer打开这个html会发现报错

在这里插入图片描述
细看一下，是生成的路径都是以/开头，按理我们应该使用相对路径

当然它默认这么生成肯定有它的道理，至于是啥先不管，能跑再说

咱全改成相对路径（就加个点），本地使用liveServer能正常预览了
在这里插入图片描述

  1. 配置并上传至云服务器

一般情况下服务商会给下好个Linux系统，没有的自己找教程下一个

我现在默认你们已经连接了xshell（远程指令）和xftp（传输文件），其他可代替的也行

a. 安装模块(用普通方法可能找不到包，下面的是我找到可行的)

yum --disableexcludes=all install -y httpd

如果安装成功以后可以看到一级目录var中出现www文件夹（是里面，不是同级目录）

在这里插入图片描述

b. 启动httpd模块（一般默认会启动的，这里是为了验证是不是成功启动了）

启动模块

systemctl start httpd.service

可能会出现的问题：

启动失败了
在这里插入图片描述

我们查看一下状态：

systemctl status httpd.service

发现我们的端口被占用了
在这里插入图片描述
http是80端口，查一下被哪个进程占用了

sudo netstat -tulpn | grep :80

找到进程号并将其关闭

在这里插入图片描述

再重新启动一下httpd至成功即可，出现其他问题就得小友自行查找了

最后一步就很简单了

使用xftp将我们打包好的文件上传到这个路径下即可

在这里插入图片描述


原文地址：https://blog.csdn.net/m0_73756108/article/details/140579191

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024