部署 Vue 前端项目到 Linux

看看怎么把一个 Vue 3 项目部署到 Linux 服务器上。准备好你的咖啡,让我们愉快地度过这段部署时光!

前期准备

确保你已经在本地构建了 Vue 3 项目,并生成了 dist 文件夹。

bash 复制代码
npm run build

构建完成后,你将看到一个新鲜出炉的 dist 文件夹,里面包含所有静态资源。

传输文件到服务器

接下来,我们需要将这些文件传输到你的 Linux 服务器上。你可以使用 SCP,rsync,或者你喜欢的任何工具。这里我们假设你使用 SCP:

bash 复制代码
scp -r dist username@your_server_ip:/path/to/destination/

username 换成你的服务器用户名,your_server_ip 换成你的服务器IP,/path/to/destination/ 换成你想要放置文件的位置,比如 /var/www/

小小友情提醒

别忘了确认你有权限访问和写入目标目录!权限问题可是能把人折腾到抓狂的。

配置 NGINX

文件传上去了,现在我们来搞定 NGINX 配置。打开或创建 NGINX 配置文件,通常在 /etc/nginx/nginx.conf/etc/nginx/conf.d/default.conf

bash 复制代码
 sudo vim /etc/nginx/nginx.conf

在配置文件中添加以下内容,将 your_server_ip_or_domain/path/to/destination/dist 替换成你自己的信息:

nginx 复制代码
server {
    listen 80;
    server_name your_server_ip_or_domain;

    location / {
        root /path/to/destination/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

替换示例:

  • your_server_ip_or_domain 其实就是你服务器的IP地址或域名。
  • /path/to/destination/dist 是你刚才放置 dist 文件夹的路径。

重启 NGINX 服务

配置文件改好了?好嘞!咱们需要让NGINX重新加载这些新配置:

bash 复制代码
sudo nginx -t  # 检查一下配置文件有没有写错别字之类的小毛病
sudo systemctl restart nginx  # 重启NGINX,让新配置生效

开放防火墙端口

你可不希望你的项目只能自己瞧瞧吧?让我们打开80端口,让世界都能访问:

bash 复制代码
sudo firewall-cmd --permanent --add-service=http
sudo firewall-cmd --reload

完美解决

如果你没有写错任何一步,打开浏览器,输入你的服务器IP或域名,哒哒哒,你的 Vue 3 项目现在应该愉快地跑在服务器上了!

总结

通过这些步骤,你成功将一个 Vue 3 项目部署到了 Linux 服务器上,并配置了 NGINX------这可是极具成就感的一项成就!快去享受你的成果,向世界展示你的作品吧!

Happy deploying! 🚀

相关推荐
Mintopia1 分钟前
🌀曲面细分求交:在无限细节中捕捉交点的浪漫
前端·javascript·计算机图形学
Mintopia4 分钟前
🧙‍♂️用 Three.js 判断一个点是否在圆内 —— 一次圆心和点的对话
前端·javascript·three.js
liliangcsdn19 分钟前
mac mlx大模型框架的安装和使用
java·前端·人工智能·python·macos
CssHero22 分钟前
基于vue3完成领域模型架构建设
前端
PanZonghui25 分钟前
用项目说话:我的React博客构建成果与经验复盘
前端·react.js·typescript
言兴29 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte32 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常33 分钟前
网页视频录制新技巧,代码实现超简单!
前端
Everbrilliant8934 分钟前
Ubuntu系统下交叉编译Android的X265库
linux·运维·ubuntu·x265交叉编译·android x265·ffmpeg x265
前端的日常35 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端