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

Posted 2021-09-24 孔子-说

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
},