@vue/cli+axios本地开发环境和联调环境——以ruoyi-vue为例

最新推荐文章于 2024-06-21 12:19:08 发布

one_old_moon_cake

最新推荐文章于 2024-06-21 12:19:08 发布

阅读量826

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/one_old_moon_cake/article/details/115320096

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

背景 · 扫盲

本文讲述在ruoyi-vue^[1]项目下配置多环境。

[1] 开源项目文档地址： https://doc.ruoyi.vip/ruoyi-vue/

实现目的：通过npm run dev 和 npm run dev:stage 两个命令使用不同的环境配置运行环境，改变环境时不需要进入任何文件修改api地址。

本地开发环境下的api路径为线上mock地址，开发时vue组件通过axios请求（经过拦截器）访问localhost/dev-api/ 下的接口地址，再通过vue.config.js^[2]配置的proxy将localhost/dev-api/ 重写为线上mock地址。
本地开发计划结束后，进入测试阶段。

[2]：新版本（@vue/cli) 在项目根目录下配置vue.config.js 文件；
旧版本(vue-cli)的版本号为1.x or 2.x，参考https://cli.vuejs.org/zh/guide/installation.html 进行卸载更新。

单环境

开发环境下，页面发送请求，此时的请求地址为/dev-api（前面的 / 表示当前路径为相对路径，所以完整地址为/localhost/dev-api）。这个请求被交给webpack开启的node服务器，服务器将/dev-api 这个请求重写成 devServe 中配置的 target （服务器地址）。
当前文件内容为

env.development

# 开发环境配置
ENV = 'development'

# 若依管理系统/开发环境
VUE_APP_BASE_API = '/dev-api'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

vue.config.js

  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`,
        target: "http://xx.xx.xxx.x:3000/mock/59",
        changeOrigin: true,
        pathRewrite: {
          ["^" + process.env.VUE_APP_BASE_API]: ""
        }
      }
    },

request.js

const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: process.env.VUE_APP_BASE_API,
  // 超时
  timeout: 10000
});

/dev-api 的作用是一个标识，用来给webpack重写成相对应的地址。
在development 的环境下，webpack加载的api标识就是 dev-api 所以webpack 中的代理配置会读取到名称为 /dev-api 的配置。
换个环境（如test环境下，webpack能读取到test的 VUE_APP_BASE_API 的名称的配置。
这就是为什么 VUE_APP_BASE_API 需要和 devServe.proxy中的键名一样。

多环境

添加一个测试环境

添加配置：

.env.staging

NODE_ENV = production

# 测试环境配置
ENV = 'staging'

# 若依管理系统/测试环境
VUE_APP_BASE_API = '/stage-api'

requests.js

在请求拦截中添加

    // 联调环境
    if (config.baseURL == "/stage-api") {
      if (config.url == "/login") {
       // do something
       // config.url == "/auth/oauth/token"
      }
      if(config.url == "/quit"){
       // do something
      }
      // 可以修改url的路径[3]
      // do something
      config.url = config.url.replace(/system/g, "sys");
      config.url = config.url.replace(/other/g, "anther");
    }

[3]：一般在项目中，我们使用baseUrl + url 的组合方式来分隔api地址，将相同的部分用BaseUrl 保存起来，例如三个api（本地开发环境）的完整地址为127.0.0.1/8081/api/user/login，127.0.0.1/8081/api/other/used 和 127.0.0.1/8081/api/system/dict ，那么baseurl可以设置为127.0.0.1/8081/api 。
而测试环境下对应的接口地址为192.168.202.131:8000/api/auth/oauth/token,192.168.202.131:8000/api/anther/used和192.168.202.131:8000/api/sys/dict。
那么可以在上述代码块中的第一个// do something 修改config;如果在测试阶段对mock阶段的api规则进行了修改，并且mock文档保持不变的规则，就像上述的测试环境中使用sys代替了本地开发中的system的情况一样，就可以在第三个// do something 中通过正则匹配修改。
参考 axios官网对config的说明

vue.config.js

在代理中添加多个代理条件，匹配到相应的环境。

    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      // [process.env.VUE_APP_BASE_API]: {
      //   target: "http://127.0.0.1:3000/mock/59",
      //   changeOrigin: true,
      //   pathRewrite: {
      //     ["^" + process.env.VUE_APP_BASE_API]: ""
      //   }
      // }
      
	  // [4]
      '/dev-api': {
        target: "http://192.168.33.201:8081/mock/api",
        changeOrigin: true,
        pathRewrite: {
          ["^" + process.env.VUE_APP_BASE_API]: ""
        }
      },
      "/stage-api": {
        target: "http://192.168.33.222:7000",
        changeOrigin: true,
        pathRewrite: {
          ["^" + process.env.VUE_APP_BASE_API]: ""
        }
      }
    },

[4] 注释原来的[process.env.VUE_APP_BASE_API] 代理。原因是，在npm run dev 和 npm run dev:stage 两个运行模式下的VUE_APP_BASE_API 值是不一样的，并且两个模式下使用的api地址也是不一样的，所以需要对应本地开发情况（/dev-api）和联调测试情况(/stage-api) 设置指向到不同的地址（target）
更多proxy设置查看github中的文档。