Vue项目使用webpac打包项目配置外部配置文件方式

公司最近尝试前后端分离，前端打包后，可能需要部署在多个现场，不同的服务器上。这就产生了一个问题，项目中请求地址不能写死，需要随时可以外部配置。多方尝试，终于找到一种办法。如下：

• 第一步，先在static文件夹下新建一个config文件夹，新建配置文件，就叫myConfig.js。内容假设如下：

(function(env) {
    // 开发环境服务器地址
    const dev  =   {
        host: "http://192.168.12.80:9527"
    }; 
    // 测试服务器地址
    const test  =   {
        host: "http://web.test.cn"
    };
    if (env  == 'dev')  {
        return dev;
    } else if (env  == 'test')  {
        return test;
    }
}('dev'))
复制代码

是一个自执行文件，到时候在main.js中请求这个文件执行即可。

• 在main.js中请求执行配置文件

let configPath = './static/config/myConfig.js';
if (process.env.NODE_ENV === 'development') {
    configPath = '../static/config/myConfig.js';
}

axios.get(configPath).then(response  =>  {   
    Vue.prototype.$apiPrefixes  = eval(response.data); 

    /* eslint-disable no-new */
    new Vue({
        el: '#app',
        router,
        store,
        components: { App },
        template: '<App/>'
    })
});
复制代码

这样就可以得到配置对象，根据实际需求进行配置即可。