vue项目webpack打包项目输出可修改配置项

前不久项目打包交付测试进行测试时，需要打包到不同的测试服务器分别指向其对应api地址，如果打包一次修改一次api地址，那岂不是很麻烦？

今天我们就来解决这个问题：

核心思路：打包输出一份配置，代码中获取配置

方法一：

1.在static(webpack不会编译)下创建serve.config.js

/**
 * @description 打包后抽取的配置 BaseUrl 必须是host地址 + 端口号
 */

(function () {
    let win = typeof window == 'undefined' ? global : window
    win.Glob = {
        BASE_URL: '172.16.0.223/api'
    }
})()

注意：如果遇到 window is not defined 因为在node环境中是global对象

2.在需要用到的地方

// window.Glob.BASE_URL

let host = ''
// 开发环境 npm run dev
if (process.env.NODE_ENV !== 'production') {
    host = '/api'
} else {
    // 测试环境 npm run test
    if (process.env.type == 'test'){
        host = 'http://' + window.Glob.BASE_URL
    }else { // 正式环境 npm run build
        host = 'http://1.1.1.1'
    }
}

3.最后在index.html引入

4.打包后效果

方法二：

利用webpack打包出配置文件

1.下载

npm i compression-webpack-plugin -S

2.webpack 3.6 新增插件 generate-asset-webpack-plugin

const GenerateAssetPlugin = require('generate-asset-webpack-plugin')

const createJson = function () {
    let serveConfigJson = {
        code:200,
        data:{
            BASE_URL: "172.16.0.94:80"
        },
        msg:''
    }
    return JSON.stringify(serveConfigJson,null,4)
}

// 3.6利用webpack.plugin.push 添加插件 --- 4.0 ：Compiler.hooks.xxx.tap(<plugin name>, fn)

webpackConfig.plugins.push(
	    // 抽离打包配置文件
        new GenerateAssetPlugin({
            filename: 'serve.config.json', // 输出到test根目录下的serve.config.json
            fn: (compilation, cb) => {
                cb(null, createJson(compilation))
            },
            extraFiles: []
        })
）

3.main.js中vue.prototype赋值

request.get('./serve.config.json')
    .then(res => {
        Vue.prototype.BASE_URL = res.data.baseURI
    })
    .catch(err => {
        throw 'serve.config.json is not defined'
    })

4.打包后效果