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

Vue项目自动化测试命令配置

最新推荐文章于 2025-07-09 18:05:29 发布

原创最新推荐文章于 2025-07-09 18:05:29 发布 · 2.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #Webpack

Vue 同时被 2 个专栏收录

29 篇文章

订阅专栏

Webpack

11 篇文章

订阅专栏

本文详细介绍如何在Vue项目中，通过配置环境变量和修改项目脚本来自动化调用不同环境下的API，包括本地、测试和开发环境。通过在build文件夹下创建test.js文件，并修改config文件夹中的prod.env.js，最后在package.json中添加npmruntest命令，实现了自动化测试环境的搭建。

最近在做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)：在项目中判断环境：
在这里插入图片描述

二、总结：

调用本地环境

npm run dev

调用测试环境api

npm run test

调用开发环境api

npm run build