【前端进阶】最新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加插件的方式，我也是自己改良后这么干的，如果有更好的方式可以在评论区告知一下，谢谢。
