前端VUE3项目部署到linux服务器（CentOS 7）

部署思路

一.本地VUE3项目打包（构建生产版本）

二.连接你的阿里云服务器，下载Nginx

1.使用finalShell连接linux服务器

2.安装Nginx

3.创建Nginx欢迎页

4.访问Nginx

三.将dist文件夹，上传到Linux服务器

1.创建自定义目录，用于保存前端代码

2.将dist目录，上传到/home/jhj/develop/java_code/vue_his

[四.配置 Nginx ，从而使之托管你的网站](#四.配置 Nginx ，从而使之托管你的网站)

1.创建并编辑配置文件

[2.按 i 进入编辑模式，粘贴以下配置](#2.按 i 进入编辑模式，粘贴以下配置)

3.检查并应用配置

最终效果

如果后续前端页面修改，如何更新代码版本？

部署思路

一.本地VUE3项目打包（构建生产版本）

bash 复制代码

npm run build

效果展示

二.连接你的阿里云服务器，下载Nginx

1.使用finalShell连接linux服务器

2.安装Nginx

bash 复制代码

# 更新包管理器并安装 Nginx
sudo yum install epel-release
sudo yum install nginx

# 启动Nginx并设置开机自启
sudo systemctl start nginx
sudo systemctl enable nginx

3.创建Nginx欢迎页

bash 复制代码

# 创建真正的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/">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/">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，后续将前端的代码都上传到这里即可。

bash 复制代码

[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.创建并编辑配置文件

bash 复制代码

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) 即可。

以上就是本篇文章的全部内容，希望可以帮到你。

喜欢本篇文章的话，可以留个免费的关注呦~~~