侧边栏壁纸
博主头像
孔子说JAVA博主等级

成功只是一只沦落在鸡窝里的鹰,成功永远属于自信且有毅力的人!

  • 累计撰写 285 篇文章
  • 累计创建 125 个标签
  • 累计收到 4 条评论

目 录CONTENT

文章目录

若依vue项目更改开发环境端口

孔子说JAVA
2021-09-08 / 0 评论 / 0 点赞 / 237 阅读 / 987 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-03-30,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

Ruoyi-vue前后端分离项目,前端主要负责页面展示和转发请求,后端负责处理业务逻辑,并将处理结果返回给前端。

前端对接口的转发是通过 vue.config.js 文件配置,可以在devServer(这个配置下转发的请求)-proxy-pathRewrite 可以看到真正的接口地址和请求的参数都被替换了。

以下是开发环境更改前后端端口的具体说明。

1、前端访问端口修改

打开ruoyi-ui根目录下的vue.config.js文件,修改const port常量。如端口由原来的80改为801,代码如下:

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

2、后端应用端口修改

打开application.yml,修改server下的port值。

# 开发环境配置
server:
  # 服务器的HTTP端口,默认为8080,jar方式部署时此端口为后端服务端口
  port: 8789
  servlet:
    # 应用的访问路径
    context-path: /
  tomcat:
    # tomcat的URI编码
    uri-encoding: UTF-8
    # tomcat最大线程数,默认为200
    max-threads: 800
    # Tomcat启动初始化的线程数,默认值25
    min-spare-threads: 30

3、前端代理调用后端接口的端口修改

打开ruoyi-ui根目录下的vue.config.js文件,找到devServer下的proxy代理配置,修改代理端口号。

// webpack-dev-server 相关配置
devServer: {
    host: '0.0.0.0',
    port: port,
    open: true,
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
       // 修改target中的端口,对应开发环境的后台服务端口
        target: `http://localhost:8789`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    disableHostCheck: true
},
0

评论区