RuoYi若依框架前端部署

本文部署的若依版本是3.8.9，服务器操作系统windows 10。

下载地址：

https://gitee.com/y_project/RuoYi-Vue

一. 所需环境

0. 若依后端已经正常启动，这里默认是在本地部署，地址是http://127.0.0.1:8081。
1. 已安装运行nginx，版本1.22.1-1。

二. 修改ruoyi-ui配置文件

在ruoyi-ui目录下的vue.config.js文件，

修改第1处：

const port = process.env.port || process.env.npm_config_port || 7079 // 端口

这里的端口7079就是前端访问的web端口。

修改第2处：

target: `http://127.0.0.1:8081`,

这里是指定后台访问的ip地址和端口。

三. 前端打包

在cmd终端中，进入到ruoyi-ui目录，输入命令行：

npm run build:prod

等待一段时间打包成功，此时在ruoyi-ui文件夹下生成dist目录。此目录就是打包之后的前端的资源。

然后将此dist目录放在服务器上的某个目录下，在这里仅用于测试，文件夹位置不改变，为：

D:\coding\java\RuoYi-Vue-master\RuoYi-Vue-master\ruoyi-ui\dist

，后面使用Nginx代理会用，另外不要动dist下文件的路径。

需要注意的是：在windows中的路径应采用正斜杠/

也即是上面的路径，在nginx中的路径应采用：

D:/coding/java/RuoYi-Vue-master/RuoYi-Vue-master/ruoyi-ui/dist

四. 修改nginx配置

编辑nginx配置文件nginx.conf，在http模块中，添加一个server虚拟主机信息，详细的信息如下如下：

    server {
        listen       7079;
        server_name  localhost;
        charset utf-8;

        location / {
            root   D:/coding/java/RuoYi-Vue-master/RuoYi-Vue-master/ruoyi-ui/dist;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
        
        location /prod-api/ {
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://127.0.0.1:8081/;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

五. 启动nginx程序

在nginx程序目录，以管理员启动cmd窗口，运行命令：

启动：start nginx
停止：.\nginx.exe -s stop
重新加载配置： .\nginx.exe -s reload

打开本地ip和7079端口即可打开前端。