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"); }
- data.json文件
- 动态设置背景图
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项目中,无需打包而动态更改背景图以及标题的更多相关文章
- vue项目中基于D3.js实现桑基图功能
前端实现数据可视化的方案有很多种,以前都是使用百度的echarts,使用起来很方便,直接按照特定的数据格式输入,就能实现相应的效果,虽然使用方便,但是缺点就是无法自定义一些事件操作,可自由发挥的功能很 ...
- Vue项目中遇到的一些问题总结
一.开发环境使用Ajax请求,报错 网上查的资料,在config中的index.js这样设置 proxyTable:{ '/api':{ target:'', //此处为你的API接口地址 chan ...
- 如何在Vue项目中使用Typescript
0.前言 本快速入门指南将会教你如何在Vue项目中使用TypeScript进行开发.本指南非常灵活,它可以将TypeScript集成到现有的Vue项目中任何一个阶段. 1.初始化项目 首先,创建一个新 ...
- 如何在Vue项目中,通过点击DOM自动定位VScode中的代码行?
作者:vivo 互联网大前端团队- Youchen 一.背景 现在大型的 Vue项目基本上都是多人协作开发,并且随着版本的迭代,Vue 项目中的组件数也会越来越多,如果此时让你负责不熟悉的页面功能开发 ...
- 在vue项目中, mock数据
1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下 ...
- 去除vue项目中的#及其ie9兼容性
一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) export default new Router({ m ...
- vue 项目中当访问路由不存在的时候默认访问404页面
前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...
- vue项目中遇到的那些事。
前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...
- 转:如何在Vue项目中使用vw实现移动端适配
https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...
随机推荐
- Java基本的程序结构设计 整形和浮点型
整形: int 4字节 short 2字节 long 8字节 byte 1字节 int的大小差不多是20亿. 整形计算 如果两个int进行加减乘除数学运算的时候,最终的结果仍然是int,有可能出现了溢 ...
- CSS中filter属性的使用
filter 属性定义了元素的可视效果 blur 给图像设置高斯模糊."radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊. 如果没有设定值 ...
- Vue的编译过程
碰到是否有template选项时,会询问是否要对template进行编译: 在template编译(渲染成UI)有一个过程.模板通过编译生成AST,再由AST生成Vue的渲染函数,渲染函数结合数据 ...
- BZOJ 3294: [Cqoi2011]放棋子 计数 + 容斥 + 组合
比较头疼的计数题. 我们发现,放置一个棋子会使得该棋子所在的1个行和1个列都只能放同种棋子. 定义状态 $f_{i,j,k}$ 表示目前已使用了 $i$ 个行,$j$ 个列,并放置了前 $k$ 种棋子 ...
- ApiException
ApiException 用于在catch中throw 异常,可以添加异常信息, throw new ApiException("线下绑卡异常!"); public class A ...
- BZOJ 2281 Luogu P2490 [SDOI2011]黑白棋 (博弈论、DP计数)
怎么SDOI2011和SDOI2019的两道题这么像啊..(虽然并不完全一样) 题目链接: (bzoj) https://www.lydsy.com/JudgeOnline/problem.php?i ...
- android日志优先级
Android 的日志分为如下几个优先级(priority): V —— Verbose(最低,输出得最多) D —— Debug I —— Info W —— Warning E —— Error ...
- sqli-labs(34)
0x01构造闭合 同样 发现 ’被注释掉了 试探了一波发现什么信息都不会返回 正确错误的页面都一样 之前我们的方法就是将过滤函数添加的 \ 给吃掉.而get型的方式我们是以url形式提交的,因此数据会 ...
- http中post 和 get 请求方法区别
前言 做Web开发就一定会涉及到浏览器和服务器的交互,所以了解浏览器和服务器交互的方式就尤为重要.从接触B/S开始就已经接触到了get和post,但是对它们的了解确实不深入.在后来不断的做项目过程中, ...
- HDU6025 Coprime Sequence(gcd)
HDU6025 Coprime Sequence 处理出数列的 \(gcd\) 前缀和后缀,删除一个数后的 \(gcd\) 为其前缀和后缀的 \(gcd\) . 遍历数列取 \(max\) 即为答案. ...