vue前端怎么代码自测_Vue Cli 脚手架分离测试环境和正式环境

项目开发中有个很常见的场景是，本地开发有本地开发服务器，调用本地接口。测试有测试服务器调用测试接口。然后还有专门的线上服务器，用来正式上线。

项目开发中有个很常见的场景是，本地开发有本地开发服务器，调用本地接口。测试有测试服务器调用测试接口。然后还有专门的线上服务器，用来正式上线。

而Vue Cli构建的项目只有npm run dev和npm run build两条开发和编译的命令。而本教程的最终目的就是扩展出一条npm run test的命令输出测试环境下执行的代码。

在build文件夹中创建build-test.js文件

build-test.js中的代码很简单，就两行。主要就是配置一个环境变量用以区别测试和正式环境。这里没有直接修改原有的process.env.NODE_ENV是担心会影响到原本的逻辑。

注意：type的值必须单双引号两层嵌套，不能直接为’test’，否则会报错

// 配置环境变量 type 为 test

process.env.type = '"test"'

// 引入build.js文件，执行原先的编译代码

require('./build')

修改config文件夹中的prod.env.js文件

配置好后就可以在项目代码中调用process.env.type了

module.exports = {

NODE_ENV: '"production"',

// 将上文设置的环境变量，赋值到 type 属性上

type: process.env.type

}

在package.json文件中添加npm run test命令

添加一条命令，执行我们上文创建的build-test.js文件

"scripts": {

"dev": "node build/dev-server.js",

"test": "node build/build-test.js",

"build": "node build/build.js"

},

在项目代码中判断环境

按照上述的步骤做完后，就可以在项目代码中写判断了

let baseURL

// 开发环境

if (process.env.NODE_ENV === 'development') {

baseURL = 'http://192.168.1.120:8100/'

// 编译环境

} else {

// 测试环境

if (process.env.type === 'test') {

baseURL = 'http://test.xxx.com/'

// 正式环境

} else {

baseURL = 'http://app.xxx.com/'

}

}