(vue)Vue读取public中的json文件,打包后只需更改包文件

news2024/12/23 9:52:06

(vue)Vue读取public中的json文件,打包后只需更改包文件


背景:增加账号需求。原本是在页面,每次都需技术人员添加再打包部署,现在放到json里,以后直接服务器改json就行。


旧版:

let userArr = [
  {username:'aaa',password:'123456'},
  {username:'bbb',password:'234567'}, 
  ...
]
let arr = userArr.filter(e => this.loginForm.username == e.username)
...

新版

// request.js中统一获取pubulic下userArr.json
let userArr = globalConfig
let arr = userArr.filter(e => this.loginForm.username == e.username)
...

解决方法:

第一步、pubulic下新建json文件(打包后dist里边也会有)

在这里插入图片描述

第二步、userArr.json

[
  {
    "username":"aaa",
    "password":"123456"
  },{
    "username":"bbb",
    "password":"234567"
  }
  ...
]

第三步、request.js

import axios from 'axios'
...

axios.request({
    url: '/server.json',//直接填写json文件在public下的路径即可
    method: 'get',
}).then(res => {
    Window.prototype.globalConfig = res.data;
}).catch(err => {
    alert("请在public文件夹下添加server.json配置文件")
})

...

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1936932.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

系统架构设计师教程 第3章 信息系统基础知识-3.7 企业资源规划(ERP)-解读

系统架构设计师教程 第3章 信息系统基础知识-3.7 企业资源规划(ERP) 3.7.1 企业资源规划的概念3.7.2 企业资源规划的结构3.7.2.1 生产预测3.7.2.2 销售管理(计划)3.7.2.3 经营计划(生产计划大纲)3.7.2.4 …

IDEA双击卡住打不开问题解决

双击idea图标一直卡在这个页面 解决方案: 随便找个文件 edit with intellij idea打开 删除最近安装的插件 apply 然后重启

C++容器之array

C array容器 特点 array是固定大小数组。 C中,array是一个模板类,提供了数组的功能,在许多方面比原始的 C 风格数组更为强大和灵活。 主要特点 固定大小: std::array 的大小在编译时确定,运行时无法修改。包含全部 STL 功能:…

神经网络之循环神经网络

目录 一、循环神经网络概述:1.传统神经网络与循环神经网络的区别:2.循环神经网络定义: 图片来自:深度学习———循环神经网络 一、循环神经网络概述: 1.传统神经网络与循环神经网络的区别: MLP、卷积神经…

【单目3D检测】smoke(1):模型方案详解

纵目发表的这篇单目3D目标检测论文不同于以往用2D预选框建立3D信息,而是采取直接回归3D信息,这种思路简单又高效,并不需要复杂的前后处理,而且是一种one stage方法,对于实际业务部署也很友好。 题目:SMOKE&…

【LabVIEW作业篇 - 4】:属性节点赋值和直接节点赋值的区别体现

文章目录 属性节点赋值和直接节点赋值的区别体现 属性节点赋值和直接节点赋值的区别体现 创建5个圆形指示灯,然后循环点亮,先给圆形指示灯赋值假变量,然后再进行循环。 运行结果,观察结果,发现刚开始运行时&#xff0…

Unity | Shader基础知识(第十九集:顶点着色器的进一步理解-易错点讲解)

目录 一、前言 二、网格 三、方法UnityObjectToClipPos 四、顶点着色器和片元着色器的POSITION 五、作者的碎碎念 一、前言 之前我们简单讲解过顶点着色器,也简单讲解了表面着色器,并且一起做了一些案例,因为顶点着色器本身是更自由一些…

云计算实训09——rsync远程同步、自动化推取文件、对rsyncd服务进行加密操作、远程监控脚本

一、rsync远程同步 1.rsync基本概述 (1)sync同步 (2)async异步 (3)rsync远程同步 2.rsync的特点 可以镜像保存整个目录树和文件系统 可以保留原有权限,owner,group,时间,软硬链…

IDEA的工程与模块管理

《IDEA破解、配置、使用技巧与实战教程》系列文章目录 第一章 IDEA破解与HelloWorld的实战编写 第二章 IDEA的详细设置 第三章 IDEA的工程与模块管理 第四章 IDEA的常见代码模板的使用 第五章 IDEA中常用的快捷键 第六章 IDEA的断点调试(Debug) 第七章 …

Harbor系列之1:介绍、架构及工作流程说明

Harbor介绍、架构及工作流程说明 Harbor 是一个用于存储、签名和扫描内容的企业级容器镜像注册表项目。由 VMware 开发并于 2016 年开源。Harbor 提供了一些关键特性,使其成为企业使用的理想选择。 1. Harbor 介绍 1.1 什么是 Harbor Harbor 是一个开源的云原生…

Python酷库之旅-第三方库Pandas(034)

目录 一、用法精讲 101、pandas.Series.__array__魔法方法 101-1、语法 101-2、参数 101-3、功能 101-4、返回值 101-5、说明 101-6、用法 101-6-1、数据准备 101-6-2、代码示例 101-6-3、结果输出 102、pandas.Series.get方法 102-1、语法 102-2、参数 102-3、…

ETL数据同步之DataX,附赠一套DataX通用模板

今天跟大家分享数据同步datax的模板,小伙伴们简单直接借鉴使用。 还记得上一篇关于大数据DS调度工具的分享嘛? 主流大数据调度工具DolphinScheduler之数据ETL流程-CSDN博客 里面的核心就是采用了DATAX的数据同步原理。 一,什么是DataX D…

linux远程主机和windows互传

一.winscp 最简单,但有时候会出现连不上 二 .MobaXterm 可以选择多种连接方式 二. 配置samba服务器 1. 新增samba用户 sudo pdbedit -L -v 查看当前samba用户 sudo smbpasswd -a guoziyi 添加samba用户 sudo smbpasswd -x guoziyi 删除samba用户 2. 编辑/etc…

LabVIEW多串口通信

随着现代工业控制对数据采集和处理效率的要求不断提升,传统的单串口通信已无法满足多通道数据传输与大规模数据存取的需求。开发一种基于LabVIEW的多串口通信及数据存储系统,以提升数据处理速度和存储效率,保障生产线的稳定运行显得尤为重要。…

常见排序算法总结

文章目录 比较排序冒泡排序选择排序插入排序归并排序快速排序堆排序希尔排序 非比较排序(桶排序)计数排序基数排序 比较排序 冒泡排序 嵌套循环,每次内层循环执行时,数组的每两个元素交换,将一个最大/小的数排到数组…

语音合成-TTS文字转语音(专业版)

语音合成-TTS文字转语音(专业版) 一、工具简介 *使用强大的智能AI语音库,合成独具特色接近真人语音的朗读音频。 *使用极具表现力和类似人类的声音,使文本阅读器和已启用语音的助理等方案栩栩如生。 *用途:这个语音工具,不仅可…

「实战应用」如何用DHTMLX将上下文菜单集成到JavaScript甘特图中(三)

DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求,是最完善的甘特图图表库。 DHTMLX Gantt是一个高度可定制的工具,可以与项目管理应用程序所需的其他功能相补充。在本文中您将学习如何使用自定义上…

LeetCode岛屿的最大面积(深度搜索)/什么是深搜,简单案例回顾图用邻接表实现图的深度优先遍历。

看这道题不懂深度搜索的可以看看下面讲述 岛屿的最大面积 解题思路 代码 class Solution {int dfs(vector<vector<int>>& grid, int cur_i, int cur_j) {//确定边界if((cur_i >0 && cur_i < grid.size()) && (cur_j >0 &&…

【C语言】 作业11 链表+实现函数封装

递归实现链表数据互换&#xff0c;纯不会&#xff0c;明天再说 1、链表实现以下功能 链表&#xff0c;创建链表&#xff0c;申请节点&#xff0c;判空&#xff0c;头插&#xff0c;遍历输出&#xff0c;通过位置查找节点&#xff0c;任意位置插入&#xff0c;头删&#xff0c;…

技术成神之路:设计模式(八)责任链模式

介绍 责任链模式&#xff08;Chain of Responsibility Pattern&#xff09;是一种行为设计模式&#xff0c;它允许多个对象依次处理请求&#xff0c;避免请求的发送者和接收者之间的显式耦合。该模式通过将多个可能处理请求的对象连接成一条链&#xff0c;并沿着这条链传递请求…