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

posted @   IT源码猫  阅读(2535)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 提示词工程——AI应用必不可少的技术
· .NET周刊【3月第1期 2025-03-02】
点击右上角即可分享
微信分享提示
AI IDE Trae