vue-cli区分开发、测试、生产环境

2018-04-02

vue-cli工具能够快速搭建出vue项目，但在日常开发中，会根据不同的环境应用不同的接口地址，大多分为开发环境、测试环境、生产环境，但vue-cli工具只配置了开发环境与生产环境，但测试环境下也需要打包出来放到服务器上，频繁更改接口地址会很麻烦，其实只要更改下webpack配置，就可以根据设置的命令生成不同环境的项目。

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

代码很简单，主要配置一个环境变量来区分测试与正式环境。

1 2	process.env.type = '"test"' //注意必须是单双引号嵌套的形式 require('./build') //引入自带的文件，执行编译代码

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

配置好后就可以在应用process.env.type

module.exports = {
    NODE_ENV: '"production"',
    type: process.env.type
}

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

添加命令，执行build-test.js文件

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "test": "node build/build-test.js"
}

在项目中根据代码判断环境

let ajaxUrl

if(process.env.NODE_ENV === 'development'){
    ajaxUrl = 开发环境的公告接口地址
}else{
    if(process.env.type === 'test){
        ajaxUrl = 测试环境的公告接口地址
    }else{
        ajaxUrl = 生产环境的公告接口地址
    }
}

不同环境执行的命令：

开发环境启动项目：npm run dev

测试环境打包项目：npm run test

生产环境打包项目：npm run build