vue-cli构建的项目中如何引入json数据文件？

最新推荐文章于 2024-07-16 16:47:39 发布
最新推荐文章于 2024-07-16 16:47:39 发布
阅读量6.2k 收藏 5
点赞数
分类专栏： webpack vue 文章标签： json vue webpack vue-cli
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XuM222222/article/details/84581109
版权
在vue-cli构建的项目中引入JSON数据文件，可以将JSON文件放入static文件夹，然后通过axios进行调用。如果遇到404错误，可能是路径设置问题。对于不同版本的vue-cli，需要在webpack配置文件中调整devServer的contentBase属性或CopyWebpackPlugin的路径设置。正确配置后，便能成功调用JSON数据文件。
摘要由CSDN通过智能技术生成

vue-cli构建的项目中如何引入json数据文件？

方法1：

1、将json数据文件放入到static文件夹中，并将static文件夹与项目的index.html文件置于同一级

在这里插入图片描述

2、然后使用axios调用该json文件，调用地址为自己电脑ip、端口 + json数据文件路径

引入axios
在这里插入图片描述

使用axios的get请求获取数据
在这里插入图片描述

OK，两步搞定，调用成功！！！

可能会出现的问题：

调用的时候接口可能为出现404错误，即调用路径不存在，产生这种问题的原因是项目资源路径设置出现了问题，解决办法：

对于高版本的vue-cli脚手架构建的项目，在webpack.dev.conf.js配置中将devServer中的contentBase属性设置为false且CopyWebpackPlugin插件中的路径设置为static，如下图所示：<

最低0.47元/天 解锁文章
xm2by
关注
专栏目录
Vue-cli项目获取本地json文件数据的实例
11-29
通过查阅，我发现，在vue-cli基础上构建的项目中，只有static目录才是vue-cli向外暴露的静态数据文件夹，我放在static下的图片可以正常访问到，我是在static同级目录新建了datas目录，将json文件放入datas目录，请求...
vue+json实现数据的导入
qq_43977829的博客
10-11 2431
step 0 准备 (此例子为用户管理系统) template中的代码为： <template> <div class="customers container"> <h1 class="page-header">用户管理系统</h1> <table class="table table-striped"> <thead> <tr> &l
VUE调用本地json的使用方法
浮萍的博客
08-14 2万+
  开始的时候我以为，用vue去调取json要多么的麻烦，完咯就先去的百度，找了几个，看上面又要配置这配置那的，看的我都头大，像一些思维逻辑清晰的肯定不会出现这种情况。 下面我说下我这的情况，大家依情况代入 当然vue你刚开始创建的话，你是要去配置下东西，下面我说的是你的项目能够跑起来的情况，完咯再去想办法去引用json，当然我这里用的也是axios的获取方法，如果不是这种方法的可以带过了 ...
(vue)Vue读取public中的json文件,打包后只需更改包文件
最新发布
nyf_unknow的博客
07-16 602
背景：增加账号需求。原本是在页面，每次都需技术人员添加再打包部署，现在放到json里，以后直接服务器改json就行。第一步、pubulic下新建json文件（打包后dist里边也会有）第二步、userArr.json。第三步、request.js。
Vue 在项目中引入本地Json数据
小镇青年
07-16 4万+
模拟的Json数据放入项目的根目录中。在build文件夹中，找到 webpack.dev.conf.js ,我们需要在这个js文件中配置Json在它后面加上配置数据就OK //第一步 const portfinder = require('portfinder'),在后面加上 const express = require('express'); const app = express();//请...
Vue 中引入 json 的三种方法
青颜的天空的博客
05-07 3万+
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。
vue-cli-plugin-multiple-page:基于vue-cli https的buildwatch多页面条目插件
05-30
在你的 vue-cli 创建的项目中安装插件，如果没有请参考 vue add multiple-page 命令 以下是此插件的 3 个命令： init-config : 初始化vue.config.js & Views.json两个文件到你的项目 build-multi : 并行构建多个...
详解vue-cli 脚手架项目-package.json
10-19
对于使用`vue-cli`创建的项目而言，`package.json`文件扮演着核心角色，它不仅定义了项目的元数据，还包含了项目的配置信息、脚本命令及项目依赖等。 #### 项目元数据 `package.json`文件首先定义了一些基本的项目...
java.lang.Error: Unresolved compilation problems:解决方案
热门推荐
huangbaokang的博客
07-18 9万+
出现该问题的原因主要是编译等级跟jdk不一致。 先查看你jdk版本 我这里是1.7,设置下Java compiler 和 Project Facets，问题解决！！
vue-cli学习之调用json文件
m0_46394444的博客
05-15 291
vue-cli调用json文件
vue-cli引入本地json数据：封装为js文件，无需请求直接读取
shawxlee的CSDN博客
02-06 745
【代码】vue-cli引入本地json数据：封装为js文件，无需请求直接读取。
Vue项目引入本地JSON文件
qq_57671914的博客
11-21 4022
首先将JSON文件移动到assets目录下 通过import将其引入 最后直接引用即可
vue.config.js 全局配置
轻风细雨_林木木
03-20 2万+
1.Webpack配置实例 参考：https://cli.vuejs.org/zh/config/ vue.config.js vue.config.js 是一个可选的配置文件，如果项目中存在这个文件，那么它会被 @vue/cli-service 自动加载，你也可以使用 package.json 中的 vue 字段配置，但是package.json中需要严格遵照 JSON 的格式来写。 文件初始值： /** * @type {import('@vue/cli-service').ProjectOpti
vue-cli加载本地json的方法
qq_39105508的博客
10-22 6570
目前在学习vue-cli，加载json数据是我目前最上心的事，所以总结一下加载json数据的方法。（我是新手，内容多有借鉴，有错误希望指正） （1）新建一个json文件，保存位置如下：                          不用好奇，确实是两个位置，我想做的是分别获取外部与static静态文件夹中两种。 （2）咱们先说第一个，不是因为他排在第一个，而是因为他最废我精力，后来答案...
Vue-cli3及以上版本引入本地json数据报404 解决方案
weixin_46313540的博客
06-29 771
首先，我们要明确自己现在正在用的Vue-cli是什么版本，因为这可能是导致你引用本地数据报404的原因。 Vue-cli2和Vue-cli3有很多区别，其中一个是：Vue-cli2中静态文件夹是static，而在Vue-cli3中静态文件夹变成了public，没有static 在Vue-cli2中，我们把一些静态文件放到static文件夹下，而在Vue-cli3中，我们必须把静态文件放到public文件夹下，不需要再次新建static文件 至此，你可以看下你的json数据是否有放错位置。 我们直接在pu
两种方式调用本地json文件（基于Vue-cli3脚手架）
xiecheng1995的博客
07-17 6069
在前端开发过程中，当后台服务器开发数据还没完善，无法与前端进行交接时，我们习惯在本地写上一个json文件作模拟数据测试代码效果是否有问题。 vue-cli3.0往后的项目基础架构对比旧版本有些区别。以前大家都习惯在根目录下的static文件夹下创建json文件，然而vuecli3、4没有static文件夹了。若创建一个static文件夹在下面存放json文件，在实际调用过程中会报错，提示请求404。因此本文将提供两种方法调用本地的json文件。 1. 利用Axios请求调用本地json文件 Vue cli3
vue-cli创建项目package.json中没有webpack‘版本
09-05
在最新版本的Vue CLI中，创建项目时的package.json文件中没有明确指定Webpack的版本号。这是因为Vue CLI使用了一种名为"webpack-merge"的工具，它能够智能地合并来自不同依赖包的Webpack配置。这样做的好处是能够保证Webpack配置的稳定性和兼容性。 Vue CLI通过内置的Vue CLI Service来管理Webpack的配置和构建过程。Vue CLI内部集成了一套经过优化和预设的Webpack配置，这使得在创建项目时不再需要手动指定Webpack的版本号。相反，Vue CLI会根据项目的需求和所依赖的插件自动选择并配置Webpack的版本。 不再需要手动指定Webpack版本号的好处之一是能够缩短项目创建的时间，因为你不再需要了解和选择特定的Webpack版本，也不需要处理Webpack配置的复杂性。 总之，从最新的Vue CLI版本开始，创建项目时不再需要在package.json中指定Webpack的版本号，而是通过内置的Vue CLI Service自动处理和配置Webpack。这样能够提高开发效率和项目的稳定性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值