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

转自 : https://www.jianshu.com/p/ee2862796d23

 

需求背景

如果前后端项目是部署在同一台服务器的话，只需要在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管理，开发者一手掌控，灵活修改配置

作者：八月BLUE
链接：https://www.jianshu.com/p/ee2862796d23
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。