Vue项目判断开发,测试,生产环境配置api

最近在做Vue项目,想实现通过不同的命令,自动调用相应的api。

Vue Cli2.x构建的项目只有npm run dev 和 npm run build俩条开发和编译的命令,我们需要再添加一个测试 环境下的命令:npm run test。

一、配置步骤:
(1):build文件夹中创建test.js

// 配置环境变量 type 为 test,区分测试环境
process.env.type = '"test"'
// 引入build.js文件,执行原先的编译代码
require('./build')

(2):修改config文件夹中prod.env.js

module.exports = {
  NODE_ENV: '"production"',
  // 将上文设置的环境变量,赋值到 type 属性上,区分测试环境
  type: process.env.type
}

(3):在package.json文件中添加npm run test 命令

"scripts": {
    "dev": "node build/dev-server.js",
    "test": "node build/test.js", // 执行test.js文件
    "build": "node build/build.js"
},

(4):在项目中判断环境:
Vue项目判断开发,测试,生产环境配置api_第1张图片

二、总结:

  • 调用本地环境

npm run dev

  • 调用测试环境api

npm run test

  • 调用开发环境api

npm run build

你可能感兴趣的:(Webpack,Vue)