在前端代码中,区分本地、开发、测试环境。

目录

  1. 是什么?
  2. 为什么需要?
  3. 应用场景有哪些?
  4. 如何解决?
    1. 方案一
    2. 方案二
    3. 方案三

  1. 是什么?

    在前端代码中,区分本地、线上环境。

  2. 为什么需要?

    开发插件服务时,我们常需要做一个demo页面,模拟真实使用场景来校验插件是否正常可用。

    demo页面会在提测阶段在测试环境中供测试人员使用。

    有时,我们需要区分是本地开发环境还是线上/测试环境,对业务代码做出一些调整。比如:访问地址,发到线上/测试环境时插件的访问地址可能不是服务器根目录,但本地开发环境中,我们相当于在根目录调试源码的。此时需要一个标识,进行区分。

  3. 应用场景有哪些?

    开发插件服务时的demo页面需要

    应用程序中的跨域数据上报地址常常需要根据标识做区分

  4. 如何解决?

    方案一

    使用webpack的别名功能。因为在webpack运行时,可以区分环境,根据标识,利用别名,引入不同的文件,然后在客户端侧代码中,使用这个别名即可。

    1
    2
    3
    4
    5
    6
    7
    8
    config.resolve.alias
    .set('@', resolve('src'))
    .set(
    'webEnv',
    process.env.NODE_ENV === 'development'
    ? resolve('config/env.dev.js')
    : resolve('config/env.pro.js')
    )

    方案二

    使用webpack中的 DefinePlugin 插件。

    方案三

    如果你正在使用 vue-cli3 ,服务中已经集成好了特定的api。

    详见