Vue + webpack的纯前端项目如何配置外部配置文件

需求背景

如果前后端项目是部署在同一台服务器的话,只需要在development模式下配置config/index.js中的proxyTable实现开发调试时可以代理转发和跨域即可。当部署到服务器时,发出的网络请求前缀自然会拼接响应环境服务器的地址。

但是如果在前后端分别部署的情况下,上述方法显然行不通,我们需要更灵活、自主的管理后台接口服务器地址的配置。

解决方案(根据成熟度排序)

方案1

"host":"http://myweb.cn";,

"remote":"http://api.cn";

}

考虑在src源码路径中创建一个文件夹并新建一个后缀为json的配置文件,在项目的入口文件main.js中import该文件,并将其设置为所有Vue对象的扩展属性:Vue.prototype.$config = config从而在每个Vue组件中进行网络请求时可以用this.$config.remote来获取到配置文件中的远端地址。

缺点

json文件虽然易导出和引入,简洁性也够好,但不可添加注释,这一大特性决定了它做不了配置文件。至少满足不了配置文件对灵活性的要求。

方案2

// 开发环境服务器地址

constdev = {

host:"http://web.dev.cn";,

remote:"http://api.dev.cn";

}; 


// 测试环境服务器地址

consttest = {

host:"http://web.test.cn";,

remote:"http://api.test.cn";

}; 


exportdefaulttest;

此时我们可以考虑使用js文件来作为配置文件,并且在我们npm run build之前,修改其输出的响应配置,可以做到更方便的管理和切换。

缺点

此方法在我们build项目时指定接口配置显然轻松了许多,而且将所有api统一管理在唯一入口,方便后期维护。但是这个方案在部署服务器的时候又会暴露出一个缺陷:我们build了一个包在测试环境测试通过之后,需要部署到模拟环境。但此时包中读取到的配置是测试环境的api地址。于是我们再次找到源码,修改配置文件js,再次build。 存在的问题:1、有可能此时代码库中的代码已和测试服务器上的代码产生差异,偶尔不能保证部署到模拟的代码正是我们需要的版本;2、各个环境的代码分别打包、部署工作量大;3、前后端开发人员沟通成本高。

方案3

(function(env){

// 开发环境服务器地址

constdev = {

host:"http://web.dev.cn";,

remote:"http://api.dev.cn";

    }; 

// 测试环境服务器地址

consttest = {

host:"http://web.test.cn";,

remote:"http://api.test.cn";

    }; 

if(env =='dev') {

returndev;

}elseif(env =='test') {

returntest;

    } 

}('test'))

把配置文件js改写成这种形式,有参有返回值的自执行函数,且入参指定环境,返回值为api地址配置。然后将这个配置文件放在static路径下并且在main.js中调用的时候不能使用import,一定要发起网络请求,去请求这个js文件。 在发起网络请求时,需要判断当前是在npm run dev模式下还是在build模式下,可用这个方法判断:

let configPath ='./static/config/myConfig.js';

if(process.env.NODE_ENV ==='development') {

configPath ='../static/config/myConfig.js';

}

因为两种模式下的相对路径存在差异,不必多说。 拿到js文件之后,其实是解析到了一串字符串。进行以下操作:

axios.get(configPath).then(response => { 

    Vue.prototype.$apiPrefixes = eval(response); 

newVue({

el:'#app',

        router, 

template:'',

        components: { App } 

    }); 

});

其中eval(response)是eval()函数将字符串response当做一段js代码执行了,所以返回了api配置对象。

要点

要把配置文件放在static路径下,以至于build之后在dist文件夹中有配置文件的源码以供阅读和修改

一定不要在任何位置import配置文件,如果import配置文件的话,在build之时,webpack会将此时配置文件应当输出的值写死在压缩之后的js中,并赋值给Vue.prototype.$apiPrefixes,我们在build之后去动手修改dist/static中的配置文件只是徒劳,它跟index.html再无瓜葛。

如果要使用配置文件,就用网络请求,请求时注意dev和build模式下路径的差异

可以在部署完成之后修改打包之后的配置文件的实参然后刷新页面,即可在不重新打包的情况下更新配置。使配置文件脱离webpack管理,开发者一手掌控,灵活修改配置

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 117,210评论 15 132
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 153,778评论 23 676
  • 春江水暖鸭先知,是穷是富自己造,自己赚自己花谁又能把你怎么样?
    A分享阅读 42评论 0 0
  • 我说,你在哪里呢?有时会在繁忙的事务中抬头看看天空,那个曾经的,我桌子旁边爱睡觉的你,那个喜欢借我作业抄的你,那个...
    实愿阅读 66评论 0 0
  • “2011年7月3日,晚上十点左右,你没有什么感受到的吗?” “没有什么受冲击的吗?” “从那个时候,开始变得非常...
    Yeon98阅读 28评论 0 0