vue项目中,无需打包而动态更改背景图以及标题

1、背景

    今天,项目经理对已完成的项目提出了一个需求,即项目的基础功能目前针对于各个基层法院都适用,而对于不同的法院,我们每次都需要前端研发来更改所属法院的法院名称以及背景图,
这样对于演示者来说是非常不方便的,因此我们希望以后的项目无需经过前端研发来进行打包、更改,其他使用者自动传入背景图以及法院名称即可完成更改,从而提高各个环节的效率,对于
我一个菜鸟而言,第一次进行实现,因此写这篇博客进行记录,如果出现错误或者有更好的办法,请各位小伙伴积极留言哦!

2、实现

  • 思路:我们希望在代码当中增加判断语句,即判断是否为生产环境,在开发环境下采用相对路径下的内容,而在开发环境下采用动态路径下传入的内容(不可为相对路径,否则打包出现错误);
  • 动态设置标题
    • data.json文件
      {
          "platName" : [
              {
                  "courtName" : "某某法院"
              }
          ]
      }
    • 相应的代码
      const platformNameUrl =
         window.location.origin + dossierConfig.PRO_PUBLIC_PATH + "data.json";//http://10.50.x.xxx:xxxx/ceshi(打包后的名称)/data.json
         if (process.env.NODE_ENV === "production") {
         //生产环境下发送请求
         this.$axios.get(platformNameUrl).then(res => {
            const data = res.data.platName[0];
            this.courtName = data.courtName
      }); } else { this.courtName = this.$t("message.common.platformName"); }
  • 动态设置背景图
    const dossierConfig = require("../../../../config/dossier.config.js");
       const imgUrl =
         window.location.origin + dossierConfig.PRO_PUBLIC_PATH + "courtBg.jpg";//http://10.50.x.xxx:xxxx/ceshi/courtBg.jpg
       this.loginBgUrl =
         process.env.NODE_ENV === "production"
         ? imgUrl
         : require("../../assets/images/courtBg.jpg");
  • 打包完成后,将需要的courtBg.jpg与data.json文件放入包中,从而完成替换;

3、遇到的问题

      暂无

原文地址:https://www.cnblogs.com/wxh0929/p/11264780.html