Vue-cli3调取本地json报错404

最新推荐文章于 2023-07-19 09:31:31 发布
最新推荐文章于 2023-07-19 09:31:31 发布
阅读量566 收藏
点赞数 1
分类专栏： 前端问题 文章标签： 404 json vue-cli3 本地 报错
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Suger_Z/article/details/94741267
版权

vue-cli2.0升级到vue-cli3.0之后删除了vue.config.js、和static静态文件目录

所以在调取本地json文件时候回报错404

在vue-cli3中只需要把json文件直接放在public文件目录下即可直接调用，如图：

文件目录：

路径：

 

Suger、张
关注
专栏目录
vue-cli3通过axios获取本地json数据，vue.config.js配置mock数据
Yanfengting的博客
03-12 8765
这里我首先要解决的问题是： vue-cli3 获取本地json数据 我想在本地创建一个json数据，然后去发起请求 这里vue-cli2和3对比：https://blog.csdn.net/lfcss/article/details/81055847 vue.config.js // 模拟数据 const express = require('express') const app = expre...
vue cli3 代理跨域 404（失败）问题
Shimeng_1989的博客
08-28 1万+
情景：在写vue cli 中的代理时，百度了好久也没代理上，最终的问题出在路径重写上。特此记录一下，如果有跟我有一样问题的小伙伴，欢迎前来参考，可根据各自情况和实际问题进行调试。 接口地址： 代理地址为（开发环境）： // .env.development 文件中 、 VUE_APP_BASE_API 在不同环境（ .env.production文件，.env.staging...
vue访问本地public文件夹下面的文件 404
最新发布
云
07-19 1168
vue访问本地public文件夹下面的文件 404
vue中使用axios获取本地json文件，报404错
花椒和蕊的博客
07-15 1925
vue中使用axios获取本地json文件，多个json对象放在一个json文件里 昨天刚写的文章，使用axios获取到本地json文件，今天重启项目莫名其妙就报错了 又查询了一番，折腾了几个小时，找不出原因。重新百度了一番，最终解决。但是再下次运行是否还会报错，不太确定，毕竟没有找到最终的原因。 解决方案：main.js里 import axios from "axios"; Vue.prototype.axios = axios; json文件存放在public文件夹下 在要用到的页面上 网上
在vue3.0使用axios请求本地数据显示404的解决方法
zhengxinming2015的博客
05-14 3629
在vue3.0使用axios请求本地数据显示404 vue3.0以后，静态文件的路径存放改为public文件夹,包括json数据。下面贴出本人在vue3.0里用axios请求本地json数据显示404的踩坑过程。 注意画红色线的那个路径，虽然vue3.0以后把静态文件都放在了public,但请求本地数据的时候，一定记得把**…/public**去掉，要不然就会出现404错误。如下图所示： 然后如果你刷新页面，就会出现如下错误： 所以一定要记住，vue3.0请求本地json数据，记得把**…/public
vue项目打包之后放在服务器上测试的时候访问不到本地json数据的解决方法
inticaler的博客
05-08 3169
上面的代码表示在本地开发项目时模拟后端数据。项目打包之后放在服务器上，json的路径需要按照原来的json实际路径放置才会访问到（/api/index.json）
vue-cli下e2e初探
明日复明日的博客
08-27 1136
vue-cli4集成了watchNight，只需要npm安装本身和自动测试的驱动器就行。虽然nightwatch是基于Selenium Server，但是新版的nightwatch已经不需要再单独引入了。 npm install nightwatch npm install chromedriver npm install geckodriver 然后在package.json里面增加命令。我这里有两种情况，项目生成之后按照第一步的步骤，再安装watchNight，"e2e": "nightwat..
vue 分模块打包 脚手架_关于vue-cli脚手架中webpack配置基础文件详解
weixin_30750349的博客
12-31 526
一、前言vue-cli是构建vue单页应用的脚手架，输入一串指定的命令行从而自动生成vue.js+wepack的项目模板。这其中webpack发挥了很大的作用，它使得我们的代码模块化，引入一些插件帮我们完善功能可以将文件打包压缩，图片转base64等。后期对项目的配置使得我们对于脚手架自动生成的代码的理解更为重要，接下来我将基于webpack3.6.0版本结合文档将文件各个击破，纯干料。重点章节点...
[经典案例]使用Vue-cli实现路由间的跳转与调用接口完成前端页面数据的渲染与显示-文章列表项目
qq_43055855的博客
10-21 1807
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
vue-cli项目全局使用和配置vuex
JCat的博客
03-01 2231
vuex 前言 vuex是什么？ 官网解释Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 我的理解就是vuex是一个管理者，管理的方式是集中式管理，管理的对象即是vue.js应用程序中的众多组件的共享部分。 正文 vuex官方文档：https://vuex.vuejs.org/zh/ 具...
vue-cli 脚手架中 webpack 配置基础文件详解
周家大小姐
05-21 362
一、前言 vue-cli是构建vue单页应用的脚手架，输入一串指定的命令行从而自动生成vue.js+wepack的项目模板。这其中webpack发挥了很大的作用，它使得我们的代码模块化，引入一些插件帮我们完善功能可以将文件打包压缩，图片转base64等。后期对项目的配置使得我们对于脚手架自动生成的代码的理解更为重要，接下来我将基于webpack3.6.0版本结合文档将文件各个击破，纯干料。 重...
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
vue读取本地json文件
u014775723的博客
07-25 2889
方法一（我用的）： import test_mcc_json from '@/assets/data/test_mcc.json' 方法二： import axios from 'axios' Vue.prototype.$http=axios this.$http.get('../../static/data.json').then((response) => { c...
VUE访问本地json文件的那些事儿
晨埃
08-13 1696
1. VUE访问本地json文件，会产生跨域的报错，导致数据无法显示报错问题的图示这边的系统，设备，和编辑器首先把项目引入到sublime中第一步 Ctrl+Shift+P打开命令面板，输入Package Control: Install Package第二步 输入 SublimeServer并且选中第三步 安装完成过后通过Tool选项 → SublimeServer → Start Subli...
在 vue 中请求本地 json 数据一直 404 的解决办法
threewhisky的博客
04-13 3034
问题 在做项目的过程中，用 axios 以相对路径写法访问本地 json 数据一直404。 原理 当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时，该资源将会被包含进入 webpack 的依赖图中。 它会作为一个相对模块请求被解释且基于你的文件系统中的目录结构进行解析。 -------引自vue-cli 官网 HTML 和静态资源 所以原因是相对路径写法使得打包后的项目找不到文件路径。 解决办法 在用 axios 时使用绝对路
【vue】vue-cli3中用axios访问本地json文件报错404
weixin_46682277的博客
04-13 1339
去访问时，却报错404了。文件保存到本地时，通过。
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报错之：Unexpected token , in JSON at position xx
Zhou_siyue的博客
08-03 2817
常见vue报错之：Unexpected token , in JSON at position xx。
vue2、vue3中使用axios请求本地json数据的详细过程
Jeasu_0908的博客
07-09 1万+
研究背景 在我们平常写demo的时候难免需要自己模拟一些数据去调用，那么如何请求本地的json数据呢，下面将要从0开始，讲一下请求本地json数据的详细过程，途中遇到的问题及解决方法 技术选型 我们选择那种方式来请求数据呢，是要根据当前项目环境来选择，一般来说常用的是jquery的$.getJSON( ) 方法 和 ajax/axios ,由于当前vue工程是由vue-cli搭建的，我们 选用axios去请求 步骤： 1、安装axios npm install axios --save 2、在main.j
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值