Vue项目请求接口区分开发环境和生产环境下测试域名和正式域名

[heyushuo]

前言

大家平时开发项目,请求后台接口,肯定分为了测试域名下的接口和正式域名下的接口,当项目提测的时候我们打包需要把请求接口修改为测试的域名,当项目要上线的时候又需要改为线上的域名,如果有的时候出现线上需要修改东西,本地修改好了还得先改为测试,测试通过,再给为线上进行发布,相当繁琐,所以我们需要进行一些配置摆脱繁琐.(本文主要以 vue 脚手架的环境进行讲解如何配置)

一.首先需要了解 node 环境中的 process 和 process.env

• 官网解释: process 对象是一个全局变量，提供 Node.js 进程的有关信息以及控制进程。 因为是全局变量，所以无需使用 require()。

• 官网解释:process.env 返回用户的环境信息

具体返回那些信息呢?,我在本地创建了一个 index.js,在内部直接打印 process.env,直接用 node 运行这个 index.js 打印如下所示,我只是截取了部分信息

{
  COMMONPROGRAMFILES: 'C:\\Program Files\\Common Files',
  CommonProgramW6432: 'C:\\Program Files\\Common Files',
  COMPUTERNAME: 'HEYUSHUO',
  COMSPEC: 'C:\\Windows\\system32\\cmd.exe',
  CONFIG_SITE: '/mingw64/etc/config.site',
  DISPLAY: 'needs-to-be-defined',
  EXEPATH: 'D:\\Git',
  FP_NO_HOST_CHECK: 'NO',
  HOMEDRIVE: 'C:',
  HOSTNAME: 'heyushuo',
  INFOPATH: '/usr/local/info:/usr/share/info:/usr/info:/share/info',
  JAVA_HOME: 'D:\\JDK\\jdk',
  LANG: 'zh_CN.UTF-8@cjknarrow',
  LOGONSERVER: '\\\\MicrosoftAccount',
  MINGW_CHOST: 'x86_64-w64-mingw32',
  MINGW_PACKAGE_PREFIX: 'mingw-w64-x86_64',
  MINGW_PREFIX: '/mingw64',
  MSYSTEM: 'MINGW64',
  MSYSTEM_CARCH: 'x86_64',
  MSYSTEM_CHOST: 'x86_64-w64-mingw32',
  MSYSTEM_PREFIX: '/mingw64',
  NUMBER_OF_PROCESSORS: '4',
  ORIGINAL_TEMP: '/tmp',
  ORIGINAL_TMP: '/tmp',
  OS: 'Windows_NT',
  PLINK_PROTOCOL: 'ssh',
  }

我们在 vue 脚手架的 webpack 配置里或者在一些 node 开发的项目中经常看到如下代码

process.env.NODE_ENV;

从字面上看(node environment)意思为环境变量,这个变量可以判断当前处于开发环境还是生产环境,这对与是否打印日志或一些警告很有用,在 webpack 配置中通过这个字段来进行不同的打包操作

那如何设置这个环境变量呢?

如下是设置方式:

这样就把 NODE_ENV 属性注入到了 process.env 对象上,并且值为 production,以上我们所说的都是必须在 node 环境下才可以访问到,同样的 vue 脚手架中的任何配置文件中都可以去访问,但是在 web 端的 js 中,以及时 vue 的项目中是访问不到的,这里咱们需要在项目中方问到这个变量来区分开发生成使用不同的接口域名,那如何在项目中能访问到呢?

二.通过 webpack 的 DefinePlugin 来实现访问

官网解释

这个的作用是什么呢?在 node 环境中我们可以使用 process.env.NODE_ENV 来区分不同的环境,但是现在我们同样需要在 web 端也能区分出不同的环境这个时候就需要用 wbepack 这个插件

//我们这样设置之后
new webpack.DefinePlugin({
  "process.env": {
    NODE_ENV: "production"
  }
});
//在我们web项目正常的js文件中可以直接进行判断
if (process.env.NODE_ENV == "production") {
  //开发环境
}

接下来,在 vue 脚手架的基础上我们来进行修改

三.通过修改 vue 脚手架,webpack 相关配置区分请求域名

在 vue 脚手架的 build 文件夹下 webpack.dev.conf.js 和 webpack.prod.conf.js 两个文件中,我们可以看到脚手架配置中已经默认帮我们配置了 DefinePlugin 插件

//webpack.dev.conf.js 开发环境
new webpack.DefinePlugin({
  "process.env": require("../config/dev.env") //引用的是config下的文件
});
//webpack.prod.conf.js 生成环境
new webpack.DefinePlugin({
  "process.env": require("../config/prod.env") //引用的是config下的文件
});

这两个文件里的内容大致表达的就是如下的意思

//dev.env.js 开发环境
module.exports = {
  NODE_ENV: '"development"'
};
//prod.env.js 生产环境
module.exports = {
  NODE_ENV: '"production"'
};

现在开发环境咱们可以不用动,现在需要区分生产环境中的(即打包时候需要区分是测试打包还是正式打包)

正常打包咱们都是执行

//package.json
"build": "node build/build.js",
//执行命令
npm run build

现在为了区分这两种方式咱们在 package.json 里在增加一个打包方式

//package.json
"test": "node build/build.js",
//执行命令
npm run test

修改如下图:

现在最关键的一步到了,我们要在 prod.env.js 文件中去区分这两种打包方式

npm 提供一个 npm_lifecycle_event 变量，返回当前正在运行的脚本名称，比如 pretest、test、posttest 等等。所以可以利用这个变量，来区分是 build 打包的还是 test 打包的;

在上边已经说过了在 node 环境下 process.env 可以提供用的环境信息,此时就可以在 process.env.npm_lifecycle_event 拿到当前执行的那个脚本名称

所以 prod.env.js 文件中的代码我们可以这样按如下的方式写

const target = process.env.npm_lifecycle_event;
if (target == "test") {
  var obj = {
    NODE_ENV: '"test"'
  };
} else {
  var obj = {
    NODE_ENV: '"production"'
  };
}
module.exports = obj;

在自己的 web 项目中我们就可以按如下去判断不同的请求地址了

if (process.env.NODE_ENV == "test" || process.env.NODE_ENV == "development") {
  var host = "测试域名";
} else if (process.env.NODE_ENV == "production") {
  var host = "正式域名";
} else {
  //开发环境
  // 一般情况下开发环境和测试情况下的域名是相同的;
}

以上就是对 process.env.NODE_ENV 以及 webpack 的 DefinePlugin 的两个的含义和区别,和对 vue 脚手架的设置

总结:

webpack.DefinePlugin 是为了让 web 端同样可以达到 node 环境中的 process.env.NODE_ENV 的效果

如有问题请指出