首页 > 网络编程 > JavaScript > javascript类库 > vue.js > 前端VUE3部署linux服务器

前端VUE3项目部署到linux服务器(CentOS 7)完整步骤

2026-01-30 10:43:05 作者：缴鸿剑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>
EOF

4.访问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服务器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！