RuoYi若依框架 前端 部署[具体步骤]
RuoYi若依框架前端部署
本文部署的若依版本是3.8.9，服务器操作系统windows 10。
下载地址：
https://gitee.com/y_project/RuoYi-Vue
一. 所需环境
- 若依后端已经正常启动，这里默认是在本地部署，地址是http://127.0.0.1:8081。
- 已安装运行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端口即可打开前端。