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文件放入包中，从而完成替换；