Vue 2x 项目配置开发、测试、正式环境

逃离我推掉我的手 2022-01-26 04:59 410阅读 0赞

Vue Cli 2.x构建的项目只有npm run dev和npm run build两条开发和编译的命令。而要添加测试环境，我们可以扩展一条npm run test的命令输出测试环境下执行的代码。  
1.在build文件夹中创建test.js文件  
test.js中的代码很简单，就两行。主要就是配置一个环境变量用以区别测试和正式环境。这里没有直接修改原有的process.env.NODE\_ENV是担心会影响到原本的逻辑。

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

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

2.修改config文件夹中的prod.env.js文件  
配置好后就可以在项目代码中调用process.env.type了，代码如下

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

3.在package.json文件中添加npm run test命令  
添加一条命令，执行我们上文创建的test.js文件

"scripts": {
        "dev": "node build/dev-server.js",
        "test": "node build/test.js",
        "build": "node build/build.js"
    },

最后一步

let baseURL
    // 开发环境
    if (process.env.NODE_ENV === 'development') {
        baseURL = 'http://192.168.1.110:8080/'
    // 编译环境
    } else {
        // 测试环境
        if (process.env.type === 'test') {
            baseURL = 'http://test.xxx.com/'
        // 正式环境
        } else {
            baseURL = 'http://app.xxx.com/'
        }
    }