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

Posted 孔子-说

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了若依vue项目更改开发环境端口相关的知识,希望对你有一定的参考价值。

目录

1、前端访问端口修改

2、后端应用端口修改

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


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
,

以上是关于若依vue项目更改开发环境端口的主要内容,如果未能解决你的问题,请参考以下文章

在vue项目中若依框架设置多个proxy跨域代理

若依和vue-admin哪个更适合二开

若依V3 | RuoYi-Vue3-JS Doc

如何看若依管理后台的版本号

若依框架前端Vue项目分析实战

Ruoyi-Vue若依前后端分离版 代码生成