前端VUE3项目部署到linux服务器（CentOS 7）
目录
2.将dist目录，上传到/home/jhj/develop/java_code/vue_his
部署思路
一.本地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 nginx3.创建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/">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> 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.conf2.按 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) 即可。
以上就是本篇文章的全部内容，希望可以帮到你。
喜欢本篇文章的话，可以留个免费的关注呦~~~
