vue怎么引入外网json文件

今日吃午饭时，伊万卡前端小妹问了我一个问题。
“App中有一个模块是用H5做的，其中有一个接口读取的是本地json资源文件，但是这个文件修改时间不定，我又不想每次修改了这个文件再重新发版打个包！？”
我头也没抬的答道：“改成接口不就行了，回头让小川配合你改一下。”
“但是这个文件中的数据修改没有规律，是个json数组，改成接口感觉会更麻烦。”
看来伊万卡小妹已经思考过这个方案了，我心中忖了2秒钟，答道：
“放在本地不行，改成接口不行，那把这个文件放到公司CDN服务器上吧，这样这个文件修改了，只需要更新服务器上的文件就行了，回去我给你申请个权限。”
“那如果CDN上的文件更新了，本地缓存问题怎么解决呢？”
“这个问题不用担心，咱们公司有个管理系统，可以针对CDN服务器上某个URL来刷新缓存，当你这个文件更新了，刷新一下这个URL就行。”
伊万卡小妹笑了笑，看来她对这个方案还算满意。
我顺着这个思路继续想了下去，如果直接引用这个json文件的话，还的把这个文件改造一下才行。
比如你的文件 demo.json 中的内容是：

[{
name:'张三',
age:10
},{
name:'李四',
age:20
}]

引入的时候内容需要改成：

let _person=
[{
name:'张三',
age:10
},{
name:'李四',
age:20
}]

这样在 index.html直接引入cdn上的这个json文件，在各组件中就可以直接使用 json 中 _person 变量了。看着伊万卡小妹吃的这么香，估计前后早都想好了吧~

转载于:https://www.cnblogs.com/ligulalei/p/10751780.html

vue怎么引入外网json文件相关推荐

小米wifi设置外网访问文件
欢迎来我的个人网站查看原文小米wifi设置外网访问文件最近闲在家里没什么事,折腾一下家里的wifi,先说一下基本情况: 设备:小米wifi3,可外接一个USB设备目标:能实现外网访问USB设备上 ...
在vue中引入外部的css文件
在vue中引入外部的css文件在项目的src文件下,新建一个style文件夹,存放css文件. 1. 全局引入将外部的css文件放到style文件下,引入外部文件只需在main.js文件中 imp ...
Vue/React项目的package.json文件scripts命令解析
Node 开发离不开 npm,而脚本功能是 npm 最强大.最常用的功能之一. 1.什么是 npm 脚本? npm 允许在package.json文件里面,使用scripts字段定义脚本命令. {// ...
vue中获取外网IP的方法
记一下如何在vue项目中获取外网IP 之前有篇文章js获取客户端真实IP记录了如何获取外网IP 那个只是在普通html页面当中的获取方法,在vue项目中就不能这么使用了. 这里介绍一种适用于vue项目 ...
vue 项目如何读取本地json文件数据
在项目根目录有一个static文件夹目录,将所需要的json文件放在该static目录下,使用axios发起get请求获取对应的json文件数据 import axios from 'axios' / ...
Vue.JS项目导入导出JSON文件的方案之一，其他项目也可参考
此文章用于记录经验,方便下次借鉴,为节省时间用于举例的UI也许有点简陋,将就将就-重要的是方法. 1.导出json文件 1.1.安装file-saver 使用cnpm install file-sav ...
VUE学习(十四)读取json文件
1.json文件内容 2.使用import导入json <script setup>import config from '../../public/config/config.json' ...
vue 请求直接写入的json文件
https://www.cnblogs.com/web-aqin/p/10768345.html
uni-app引用外部css,在vue/uni-app中引入外部的css文件
一.在vue中引入外部的css文件在项目的src文件下,新建一个style文件夹,存放css文件 1. 全局引入将外部的css文件放到style文件下,引入外部文件只需在main.js文件中 `` ...

vue怎么引入外网json文件

vue怎么引入外网json文件相关推荐

最新文章

热门文章