Vue-cli3调取本地json报错404

最新推荐文章于 2023-07-19 09:31:31 发布
原创 最新推荐文章于 2023-07-19 09:31:31 发布 · 610 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#404 #json #vue-cli3 #本地 #报错

本文介绍从 Vue CLI 2.0 升级到 3.0 后，如何调整静态文件目录以避免 404 错误。在 Vue CLI 3 中，只需将 JSON 文件置于 public 目录下即可直接调用。

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

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

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

文件目录：

路径：

 

vue-cli3通过axios获取本地json数据，vue.config.js配置mock数据
Yanfengting的博客
03-12 8869
这里我首先要解决的问题是： vue-cli3 获取本地json数据 我想在本地创建一个json数据，然后去发起请求 这里vue-cli2和3对比：https://blog.youkuaiyun.com/lfcss/article/details/81055847 vue.config.js // 模拟数据 const express = require('express') const app = expre...
vue-cli下e2e初探
明日复明日的博客
08-27 1220
vue-cli4集成了watchNight，只需要npm安装本身和自动测试的驱动器就行。虽然nightwatch是基于Selenium Server，但是新版的nightwatch已经不需要再单独引入了。 npm install nightwatch npm install chromedriver npm install geckodriver 然后在package.json里面增加命令。我这里有两种情况，项目生成之后按照第一步的步骤，再安装watchNight，"e2e": "nightwat..
vue.config.js 全局配置
热门推荐
轻风细雨_林木木
03-20 3万+
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】vue-cli3中用axios访问本地json文件报错404
weixin_46682277的博客
04-13 1529
去访问时，却报错404了。文件保存到本地时，通过。
vue访问本地public文件夹下面的文件 404
云
07-19 1469
vue访问本地public文件夹下面的文件 404
vue中使用axios获取本地json文件，报404错
花椒和蕊的博客
07-15 2014
vue中使用axios获取本地json文件，多个json对象放在一个json文件里 昨天刚写的文章，使用axios获取到本地json文件，今天重启项目莫名其妙就报错了 又查询了一番，折腾了几个小时，找不出原因。重新百度了一番，最终解决。但是再下次运行是否还会报错，不太确定，毕竟没有找到最终的原因。 解决方案：main.js里 import axios from "axios"; Vue.prototype.axios = axios; json文件存放在public文件夹下 在要用到的页面上 网上
vue 分模块打包 脚手架_关于vue-cli脚手架中webpack配置基础文件详解
weixin_30750349的博客
12-31 642
一、前言vue-cli是构建vue单页应用的脚手架，输入一串指定的命令行从而自动生成vue.js+wepack的项目模板。这其中webpack发挥了很大的作用，它使得我们的代码模块化，引入一些插件帮我们完善功能可以将文件打包压缩，图片转base64等。后期对项目的配置使得我们对于脚手架自动生成的代码的理解更为重要，接下来我将基于webpack3.6.0版本结合文档将文件各个击破，纯干料。重点章节点...
[经典案例]使用Vue-cli实现路由间的跳转与调用接口完成前端页面数据的渲染与显示-文章列表项目
海海不掉头发的的博客
10-21 1937
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
vue-cli项目全局使用和配置vuex
JCat的博客
03-01 2300
vuex 前言 vuex是什么？ 官网解释Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 我的理解就是vuex是一个管理者，管理的方式是集中式管理，管理的对象即是vue.js应用程序中的众多组件的共享部分。 正文 vuex官方文档：https://vuex.vuejs.org/zh/ 具...
vue-cli 脚手架中 webpack 配置基础文件详解
周家大小姐
05-21 552
一、前言 vue-cli是构建vue单页应用的脚手架，输入一串指定的命令行从而自动生成vue.js+wepack的项目模板。这其中webpack发挥了很大的作用，它使得我们的代码模块化，引入一些插件帮我们完善功能可以将文件打包压缩，图片转base64等。后期对项目的配置使得我们对于脚手架自动生成的代码的理解更为重要，接下来我将基于webpack3.6.0版本结合文档将文件各个击破，纯干料。 重...
vue.cli3.0版本的用axios调用本地JSON数据报404解决方法
qq_43399427的博客
10-30 331
首先看一下报的错是不是和我的一样 看了好多解决方案 有的说mock的，有的说static的，我文件里都没这俩哪来的报错啊哈哈 我这里解决的办法是把Json文件放到系统创建的public目录下面（和snode_modules目录同级的那个 。 然后以下两种写路径方式都可以 注意！不用再写一遍public了 因为默认已经在里面了。 运行后，值就传过来了： 谢谢观看 ...
在vue3.0使用axios请求本地数据显示404的解决方法
zhengxinming2015的博客
05-14 3799
在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 3306
上面的代码表示在本地开发项目时模拟后端数据。项目打包之后放在服务器上，json的路径需要按照原来的json实际路径放置才会访问到（/api/index.json）
Vue-cli3及以上版本引入本地json数据报404 解决方案
weixin_46313540的博客
06-29 849
首先，我们要明确自己现在正在用的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 2991
方法一（我用的）： 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 1772
1. VUE访问本地json文件，会产生跨域的报错，导致数据无法显示报错问题的图示这边的系统，设备，和编辑器首先把项目引入到sublime中第一步 Ctrl+Shift+P打开命令面板，输入Package Control: Install Package第二步 输入 SublimeServer并且选中第三步 安装完成过后通过Tool选项 → SublimeServer → Start Subli...
在 vue 中请求本地 json 数据一直 404 的解决办法
threewhisky的博客
04-13 3246
问题 在做项目的过程中，用 axios 以相对路径写法访问本地 json 数据一直404。 原理 当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时，该资源将会被包含进入 webpack 的依赖图中。 它会作为一个相对模块请求被解释且基于你的文件系统中的目录结构进行解析。 -------引自vue-cli 官网 HTML 和静态资源 所以原因是相对路径写法使得打包后的项目找不到文件路径。 解决办法 在用 axios 时使用绝对路
vue本地请求json 报错404 解决方法来了
Exhalexujing的博客
11-06 5640
请求本地文件报错404试了几种方法这种成功了 先开始是看见网上说是 要这样不管localhost还是../ 新建一个static文件夹本地json放这个下面目录要和src同级 结果没用照常报错 继续找答案 看见一个网友说可能vuecli3.0生成的项目，静态文件变成了public文件。 最开始请求的static的文件中的json也是报错，就查看了很多的资料最后发现改了 本地请求需要在public文件中新建一个js文件，在js文件中添加json的本地数据文件 照着一做还真的是...
Vue-cli3中动态图片404问题解决策略
在vue-cli3项目中处理动态引入图片img404问题是一项常见的开发挑战，特别是在构建过程中，动态路径可能会导致Webpack打包时找不到正确的资源。本文重点介绍了解决这个问题的方法。 首先，理解问题的关键在于Vue CLI...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值