使用nginx单独部署Vben应用

F_angT

已于 2023-02-19 20:53:37 修改

阅读量1k

点赞数

分类专栏： sbvadmin 文章标签： nginx 前端 vue.js

于 2023-02-19 20:48:52 首次发布

本文链接：https://blog.csdn.net/f_angt/article/details/129072904

版权

sbvadmin 专栏收录该内容

30 篇文章 16 订阅

订阅专栏

前言

本文主要介绍Vben使用nginx单独部署的方式，其实前端发展到现在已经不是当年的jsp，asp必须要和后端一起部署了。单独部署调试的工具也很多，比如vue-cli-service 和 Vben中用到的vite ，当然这些我们一般用在开发的工程中。正式部署，一般还是build以后再放到后端部署（参考第十六节 springboot 打包vue代码实现前后端统一部署）或者使用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;
    }

}