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、遇到的问题

暂无

vue项目中,无需打包而动态更改背景图以及标题的更多相关文章

  1. vue项目中基于D3.js实现桑基图功能

    前端实现数据可视化的方案有很多种,以前都是使用百度的echarts,使用起来很方便,直接按照特定的数据格式输入,就能实现相应的效果,虽然使用方便,但是缺点就是无法自定义一些事件操作,可自由发挥的功能很 ...

  2. Vue项目中遇到的一些问题总结

    一.开发环境使用Ajax请求,报错  网上查的资料,在config中的index.js这样设置 proxyTable:{ '/api':{ target:'', //此处为你的API接口地址 chan ...

  3. 如何在Vue项目中使用Typescript

    0.前言 本快速入门指南将会教你如何在Vue项目中使用TypeScript进行开发.本指南非常灵活,它可以将TypeScript集成到现有的Vue项目中任何一个阶段. 1.初始化项目 首先,创建一个新 ...

  4. 如何在Vue项目中,通过点击DOM自动定位VScode中的代码行?

    作者:vivo 互联网大前端团队- Youchen 一.背景 现在大型的 Vue项目基本上都是多人协作开发,并且随着版本的迭代,Vue 项目中的组件数也会越来越多,如果此时让你负责不熟悉的页面功能开发 ...

  5. 在vue项目中, mock数据

    1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下 ...

  6. 去除vue项目中的#及其ie9兼容性

    一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) export default new Router({ m ...

  7. vue 项目中当访问路由不存在的时候默认访问404页面

    前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...

  8. vue项目中遇到的那些事。

    前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...

  9. 转:如何在Vue项目中使用vw实现移动端适配

    https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...

随机推荐

  1. Python核心技术与实战——十八|Python并发编程之Asyncio

    我们在上一章学习了Python并发编程的一种实现方法——多线程.今天,我们趁热打铁,看看Python并发编程的另一种实现方式——Asyncio.和前面协程的那章不太一样,这节课我们更加注重原理的理解. ...

  2. web.xml中url-pattern中/和/*的区别(来自网络)

    其中/和/*的区别: < url-pattern > / </ url-pattern >   不会匹配到*.jsp,即:*.jsp不会进入spring的 Dispatcher ...

  3. Error: unable to perform an operation on node 'rabbit@DESKTOP-6JT7D2H'. Please see diagnostics information and suggestions below.

    https://blog.csdn.net/qq_32814555/article/details/79494533

  4. h5页面ios键盘弹出收起后页面底部留白问题

    <input placeholder="验证码" type="tel" v-model="verify" maxlength=&quo ...

  5. react-native window下创建Hello(解决创建一路的坑)

    今天真的颇为激动,1年没有玩RN,竟然被最新的RN版本0.55.4创建Hello折腾了半天,想当年刚玩RN创建环境用了3天, 想想现在也是不容易啊半天就搞定了,目测以后创建的话也就1-2个小时就搞定了 ...

  6. Codeforces Round #569 (Div. 2) B. Nick and Array

    链接: https://codeforces.com/contest/1180/problem/B 题意: Nick had received an awesome array of integers ...

  7. 百度地图api的简单应用(一):POI检索

    使用之前,需要注册一个百度地图开发者账号,最好申请一个认证以获取更高的使用配额和并发上限. 注册之后,申请一个应用,获得一个ak(密钥),并填写ip地址白名单.(这里我使用0.0.0.0/0,查了自己 ...

  8. Mui去掉滚动条:

    /////////去掉滚动条mui.plusReady(function(){plus.webview.currentWebview().setStyle({scrollIndicator:'none ...

  9. 小样本学习Few-shot learning

    One-shot learning Zero-shot learning Multi-shot learning Sparse Fine-grained Fine-tune 背景:CVPR 2018收 ...

  10. 4.Python IDLE使用方法详解(包含常用快捷键)

    在安装 Python 后,会自动安装一个 IDLE,它是一个 Python Shell (可以在打开的 IDLE 窗口的标题栏上看到),程序开发人员可以利用 Python Shell 与 Python ...