vue-cli3 配合 webpak DefinePlugin 構建期間自動檢測環境變化，根據NODE_ENV引入配置文件

在使用 vue-cli3 搭建的項目中, 如何在vue.config.js中，使用使用DefinePlugin添加配置文件，構建期間自動檢測環境變化，也就是如何根據NODE_ENV引入配置文件？

./config/api

module.exports = {
    dev: {
        env: 'dev',
        apiDomain: 'http://google.com',
    },
    test: {
        env: 'test',
        apiDomain: 'http://sina.com',
    },
    prod: {
        env: 'prod',
        apiDomain: 'http://baidu.com',
    },
}

 

vue.config.js

const apiConfig = require('./config/api');

module.exports = {
    chainWebpack: config => {
        config
            .plugin('define')
            .tap(args => { 
                args[0].API_CONFIG = JSON.stringify(apiConfig[process.env.NODE_ENV])
                return args
            })
    }
}

package.json     要先安裝 cross-env 

"scripts": {
    "serve": "cross-env NODE_ENV=dev vue-cli-service serve",
    "build test": "cross-env NODE_ENV=test vue-cli-service build",
    "build prod": "cross-env NODE_ENV=prod vue-cli-service build"
 },

"devDependencies": {
    "cross-env": "^6.0.0"
}

項目中文件使用時

console.log(API_CONFIG.apiDomain)


//  http://google.com  | http://sina.com | http://baidu.com