前言

本文主要介绍Vben使用nginx单独部署的方式，其实前端发展到现在已经不是当年的jsp，asp必须要和后端一起部署了。单独部署调试的工具也很多，比如 和 Vben中用到的 ，当然这些我们一般用在开发的工程中。正式部署，一般还是build以后再放到后端部署（参考）或者使用nginx进行部署，即本文所要将的。

一、打包前端

yarn build

这步主要是将前端代码打包，一般会打包在dist文件夹内，变成一堆js和css文件。vben项目可以使用pnpm build或者yarn build， 官方github说明里面已经推荐pnpm了，不过官方文档里还停留在yarn。 我目前还用yarn。

上传文件

我们在服务器的/var下建一个www的文件夹，然后使用ftp工具将dist文件夹全部放入到www文件夹下即可

二、安装配置nginx

安装

这步不做过多介绍，如果是ubuntu20的话，两步搞定

sudo apt update
sudo apt install nginx
# 查看nginx状态：
sudo systemctl status nginx

配置 sbvadmin-vben.conf

如果通过apt安装的，一般把配置放在 /etc/nginx/conf.d/ 下面即可

server {
          
   
    listen 8083;
    root /var/www;
    location / {
          
   
        root /var/www/dist;
        index  index.html index.htm;
    }
#解决api访问跨域问题
    location /api {
          
   
        proxy_pass http://118.31.68.110:8081/api;
    }

}

如果是阿里云的话，记得配置下安全组规则

重启nginx

systemctl restart nginx

现在可以访问 了

总结

1. 配置文件是关键，跨域部分要注意
2. 如果要配置域名的话，补充下server_name即可

参考文档：

本学习日志是使用Springboot和Vue来搭建的后台管理系统： 演示地址： 账号：root 密码：123 所有代码可以在gitbub上找到，切换到相应分支即可。【】

正篇

番外