前端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服务器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vant使用datetime-picker组件设置maxDate和minDate的坑及解决
这篇文章主要介绍了vant使用datetime-picker组件设置maxDate和minDate的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了Vue2.0用户权限控制解决方法以及源码说明，一起学习下。2017-11-11
这篇文章主要介绍了详解Jest结合Vue-test-utils使用的初步实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
这篇文章主要介绍了nuxt框架中对vuex进行模块化设置的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
本篇文章主要介绍了浅谈Vue.js应用的四种AJAX请求数据模式，本文将详细介绍在Vue应用程序中实现AJAX的四个方法，有兴趣的可以了解一下2017-08-08
Vue.js 是一个渐进式的JavaScript框架,广泛用于构建交互式用户界面,在 Vue 中,双向绑定是一项非常核心的概念,尤其是在处理表单输入时,它使得数据和用户界面之间的互动变得简单又高效,在本篇博客中,我们将深入探讨如何在 Vue 3 中实现表单输入的双向绑定2025-01-01
Axios 毋庸多说大家在前端开发中常用的一个发送 HTTP 请求的库，用过的都知道,篇文章主要给大家介绍了关于vue中如何简单封装axios的相关资料,需要的朋友可以参考下2021-06-06
今天小编就为大家分享一篇Vue filter格式化时间戳时间成标准日期格式的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了详解Vue 多级组件透传新方法provide/inject，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了vue鼠标悬停事件，本文通过示例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-04-04
最新评论