RuoYi-Vue 本地代码如何代理官网接口

最近因为需要了解了一下市面上的低代码开发平台，包括阿里巴巴的lowcode-engine，由于是react所以不在考虑范围。目前我们主要的技术栈是vue，看到比较流行的要属于ruoyi这个开源项目了，正好也有这样一个表单构建的功能，不过只能通过拖拽生成vue代码，并没有预览的功能。

将代码拉下来后，发现默认情况下是连本地开发环境，但是本地我没有启动后台服务，所以 只能在本地代理官网的接口，操作比较简单。

第一步：只需要在package.json文件中在dev的后面添加 --mode production

"scripts": {
    "dev": "vue-cli-service serve --mode production",
    "build:prod": "vue-cli-service build",
    "build:stage": "vue-cli-service build --mode staging",
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src"
  },

第二步：将原本devserver中proxy里面替换成官网域名即可。

源码：

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: `http://localhost:8080`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    disableHostCheck: true
  },

修改后：

devServer: {
    host: '0.0.0.0',
    port: port,
    open: true,
    proxy: {
      '/prod-api': {
        target: `http://vue.ruoyi.vip`,
        changeOrigin: true,
        pathRewrite: {
          // '': ''
        },
        logLevel: 'debug' 
      }
    },
    disableHostCheck: true
  },

同时可以在proxy对应的规则下面添加logLevel: 'debug' ，可以实时查看请求的日志，即真实的地址。

如果看到域名为官网域名说明已经成功了。

本文章由javascript技术分享原创和收集