若依Vue前端二级目录部署

最新推荐文章于 2025-03-19 09:37:00 发布

原创最新推荐文章于 2025-03-19 09:37:00 发布 · 1.5k 阅读

4 ·

CC 4.0 BY-SA版权

作者邮箱：2268560586@qq.com，欢迎指教

文章标签：

#前端 #javascript #开发语言 #vue

文章介绍了如何在若依前端版本3.8.4和Vue2.6.x环境下，修改vue.config.js设置二级目录为admin，并更新router.index.js以启用history模式。同时，提供了Nginx的配置示例，用于处理静态文件和代理prod-api到本地8080端口。

若依前端版本

ruoyi@3.8.4
vue2.6.x

修改前端代码

ruoyi-ui/vue.config.js


// 二级目录名称admin
publicPath: '/admin/',

ruoyi-ui/src/router/index.js

export default new Router({
  mode: 'history', // 去掉url中的#
  base: '/admin/', // 二级目录路径
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

Nginx配置

location ^~ /admin/ {
        alias   /wwwroot/demofe/dist/; # 静态文件目录，改成自己的
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
        autoindex  off;
    }

    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:8080/;
        proxy_connect_timeout 120;
        # 没有接收数据关闭    等候后端服务器响应时间 这个可以响应的时间
        proxy_read_timeout 120;  # 秒
        # 没有发送数据关闭    后端服务器数据回传时间
        proxy_send_timeout  120;
    }