前端VUE3项目部署到linux服务器(CentOS 7)完整步骤
更新时间：2026年01月30日 10:46:29 作者：缴鸿剑Jackson
这篇文章主要介绍了前端VUE3项目部署到linux服务器(CentOS 7)的相关资料,包括项目打包、连接服务器、安装和配置Nginx、上传文件以及配置Nginx,文中通过代码介绍的非常详细,需要的朋友可以参考下
部署思路
一.本地VUE3项目打包（构建生产版本）
npm run build
效果展示
二.连接你的阿里云服务器，下载Nginx
1.使用finalShell连接linux服务器
2.安装Nginx
# 更新包管理器并安装 Nginx sudo yum install epel-release sudo yum install nginx # 启动Nginx并设置开机自启 sudo systemctl start nginx sudo systemctl enable nginx
3.创建Nginx欢迎页
# 创建真正的nginx欢迎页面
cat <<EOF | sudo tee /usr/share/nginx/html/index.html
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
body {
width: 35em;
margin: 0 auto;
font-family: Tahoma, Verdana, Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>
<p>For online documentation and support please refer to
<a href="http://nginx.org/" rel="external nofollow" >nginx.org</a>.
Commercial support is available at
<a href="http://nginx.com/" rel="external nofollow" >nginx.com</a>.</p>
<p><em>Thank you for using nginx.</em></p>
<p><em>Server Time: $(date)</em></p>
</body>
</html>
EOF4.访问Nginx
如下图，可见此时确实成功配置好了linux服务器的nginx。
三.将dist文件夹，上传到Linux服务器
1.创建自定义目录，用于保存前端代码
下面我们成功创建了目录/home/jhj/develop/java_code/vue_his，后续将前端的代码都上传到这里即可。
[root@iZ2zeifvpdudbmulinrasxZ java_code]# pwd /home/jhj/develop/java_code [root@iZ2zeifvpdudbmulinrasxZ java_code]# mkdir vue_his [root@iZ2zeifvpdudbmulinrasxZ java_code]# ls his-0.0.1-SNAPSHOT.jar info.log vue_his [root@iZ2zeifvpdudbmulinrasxZ java_code]# cd vue_his/ [root@iZ2zeifvpdudbmulinrasxZ vue_his]# pwd /home/jhj/develop/java_code/vue_his
2.将dist目录，上传到/home/jhj/develop/java_code/vue_his
四.配置 Nginx ，从而使之托管你的网站
1.创建并编辑配置文件
sudo vim /etc/nginx/conf.d/vue-app.conf
2.按i进入编辑模式，粘贴以下配置
server {
listen 80;
server_name 123.57.28.163;
# 指向Vue项目的dist目录
root /home/jhj/develop/java_code/vue_his/dist;
index index.html;
# 配置Vue Router的history模式支持
location / {
try_files $uri $uri/ /index.html;
}
# 静态资源缓存配置
location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|woff|woff2|ttf|eot)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
# 禁止访问隐藏文件
location ~ /\. {
deny all;
}
# 日志配置
access_log /var/log/nginx/vue-his.access.log;
error_log /var/log/nginx/vue-his.error.log;
# 限制上传大小（如果需要）
client_max_body_size 10M;
}3.检查并应用配置
# 测试nginx配置语法 sudo nginx -t # 如果没有语法错误，重启nginx sudo systemctl restart nginx # 查看nginx状态 sudo systemctl status nginx
最终效果
如果后续前端页面修改，如何更新代码版本？
当你需要更新项目时，只需
①在本地重新运行
npm run build
②然后将新的dist文件夹内容上传覆盖服务器上的旧文件，最后重新加载 Nginx (sudo systemctl reload nginx) 即可。
总结
到此这篇关于前端VUE3项目部署到linux服务器的文章就介绍到这了,更多相关前端VUE3部署linux服务器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue 中常见的时间格式转换,需要的朋友可以参考下2022-05-05
前段时间一直在学习vue,开始记录一下遇到的问题,下面这篇文章主要给大家介绍了关于vue项目中less的一些使用小技巧,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了一篇文章带你彻底搞懂VUE响应式原理，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可任意参考一下,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了详解Vue.js入门环境搭建，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-03-03
这篇文章主要介绍了Vue JS对URL网址进行编码解码,转换为对象方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
使用vue和datatables进行表格的服务器端分页实例代码
本篇文章主要介绍了使用vue和datatables进行表格的服务器端分页实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
本文主要介绍了vue 如何打开接口返回的HTML文件，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
这篇文章主要介绍了elementUI踩坑记录-el-table问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
vue使用html2canvas实现将DOM节点生成对应的PDF
这篇文章主要为大家详细介绍了vue如何使用html2canvas实现将DOM节点生成对应的PDF,文中的示例代码简洁易懂,感兴趣的小伙伴可以学习一下2023-08-08
这篇文章主要介绍了Vuex新手的理解与使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
最新评论