【前端进阶】最新vue读取properties文件配置内容,最详细解锁
简述
在前后端配合开发的时候有的时候也会遇到,前端使用的api是需要读取后端用配置文件properties。这个格式是我们前端不太会碰到。同时网上关于读取这个文件的方案也比较少,我也是碰了不少坑才解决了这个问题。下面就上干货。
准备工作
读取properties文件需要配置jquery和它的插件jquery.i18n.properties。下面提供了两个文件的下载地址有需要的可以自己去下载。jquery版本不限制,这里提供2.1.4的。
jquery2.1.4
jquery.i18n.properties
把这两个文件放在vue项目的static目录下,记住一定要放在static目录下,因为我们要在index.html页面直接引用,其他目录不能直接读取.
同时也把需要读取的配置文件放这里,我这里是conf.properties,也放在了static文件里
conf.properties 文件里我们要读取的内容是
####sts-api
sts.api=XXX
文件放置好后,在vue的index.html引用这两个文件,并开始调用方法读取配置文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>sts-vue</title>
<script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="./static/jquery.i18n.properties-min-1.0.9.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
function loadProperties(){
jQuery.i18n.properties({
name:'conf',//文件名称
path:'./static/',//具体路径位置
mode:'map',//读取模式,这里用map
callback: function() {//回调方法,你读取后要干什么都在这里
let val = $.i18n.prop('sts.api')
console.log(val);//其中sts.api为properties文件中需要查找到的数据的key值
localStorage.setItem("api",val);//我这里存入localStorage
}
});
}
loadProperties();
</script>
</body>
</html>
总结
读取properties文件的方式前端现在网上能找到的方法基本都是用这个jquery加插件的方式,我也是自己改良后这么干的,如果有更好的方式可以在评论区告知一下,谢谢。