关于vue-cli3引用本地json文件报错的问题

最新推荐文章于 2024-07-11 10:44:54 发布
最新推荐文章于 2024-07-11 10:44:54 发布
阅读量618 收藏 2
点赞数
分类专栏： 前端 vue 文章标签： vue.js json vue-cli3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shifeifeifei/article/details/115511357
版权

关于vue-cli3引用本地json文件报错的问题

报错信息：

GET http://localhost:8080/cities.json 404 (Not Found)
createError.js?2d83:16 Uncaught (in promise) Error: Request failed with status code 404
at createError
at settle
at XMLHttpRequest.handleLoad

这是我用axios请求放在和入口文件同级别下的json文件报错信息，问了大佬才知道本地的json文件属于静态文件
访问服务器文件，应该把json文件放在最外层的public文件夹，这个文件夹是vue-cli内置服务器向外暴露的静态文件夹

将json文件放在public文件夹问题就解决了

shifeifeifei
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cli-plugin-quasar：Quasar Framework Vue CLI插件
02-03
类星体框架：vue-cli-plugin-quasar :rocket: 在2分钟内开始使用Quasar Framework构建Vue应用！ :warning_selector: ... 您的Vue配置（在package.json或vue.config.js文件中，具体取决于您在创建vue应用时选择的内
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
10-17
在使用 Vue-cli3 创建的项目中，可能会遇到在安卓低版本系统或 Internet Explorer（IE）浏览器上出现白屏的问题。这通常是由于这些老旧平台不支持 ES6 以上的语法和某些新特性导致的。为了解决这个问题，我们需要...
angular引入json文件报错找不到模块“../assets/config/config.json”。请考虑使用 “--resolveJsonModule“ 导入带 “.json“ 扩展的模块。
nansen0324的博客
08-17 4264
angular引入json报错
Vue加载json文件的方法简单示例
10-17
主要介绍了Vue加载json文件的方法,结合实例形式分析了vue.js针对json文件的加载及数据读取等相关操作技巧,需要的朋友可以参考下
vue引用json文件
qq_47648083的博客
09-21 867
vue中使用json文件
vue3导入json文件并读取
weixin_46181037的博客
09-07 2300
【代码】vue3导入json文件并读取。
Vue-cli3及以上版本引入本地json数据报404 解决方案
weixin_46313540的博客
06-29 740
首先，我们要明确自己现在正在用的Vue-cli是什么版本，因为这可能是导致你引用本地数据报404的原因。 Vue-cli2和Vue-cli3有很多区别，其中一个是：Vue-cli2中静态文件夹是static，而在Vue-cli3中静态文件夹变成了public，没有static 在Vue-cli2中，我们把一些静态文件放到static文件夹下，而在Vue-cli3中，我们必须把静态文件放到public文件夹下，不需要再次新建static文件 至此，你可以看下你的json数据是否有放错位置。 我们直接在pu
【TS】vue3+ts导入json格式的文件，出现红色波浪线警告问题：
Bole6666666的博客
03-30 534
原因是TypeScript默认不支持直接导入JSON文件，没有为JSON文件指定正确的模块解析策略。，这样可以使用Node.js的类型定义。3.重启vue项目。
详解在vue-cli项目中安装node-sass
12-01
1，使用save会在package.json中自动添加。 npm install node-sass --save npm install sass-loader --save 2，通常使用npm安装会出现以下报错，安装失败。（网路问题） 3，可以通过淘宝的npm镜像安装node-sass，...
详解项目升级到vue-cli3的正确姿势
10-17
首先，升级的基本步骤看似简单，即创建一个新的 Vue CLI 3 项目，然后将原有的项目文件迁移到新项目中，更新 `package.json` 文件并执行 `yarn install` 或 `npm install`。然而，实际操作时可能会遇到问题，如报错 ...
vue实现引入本地json的方法分析
10-18
主要介绍了vue实现引入本地json的方法,结合实例形式分析了vue.js加载本地json文件及解析json数据相关操作技巧,需要的朋友可以参考下
解决vue-cli中stylus无法使用的问题方法
01-19
在写基于vue-cli的vue项目时，遇到一个小坑，css用了stylus，但是在编译时候总是报错： 来来回回折腾了数十次，终于被我折腾好了。。。解决方式如下： 1、在package.json文件中写入依赖： stylus-loader: ^...
vue3 导入导出json文件
weixin_45890414的博客
09-27 3214
导入json // 这是选择本地文件的弹框 这里display:none隐藏了，DOM依旧存在 <input type="file" id="files" ref="refFile" style="display: none" v-on:change="fileLoad" /> 获取DOM，触发他的点击事件 const refFile = ref(null); const addFileHandle = () => {
vue3+ts 引入 json-editor-vue3 报错
最新发布
RedXx
07-11 332
报错内容 SyntaxError: The requested module '/node_modules/jsoneditor/dist/jsoneditor.min.js?v=00499bcc' does not provide an export named 'default' (at json-editor.vue:2:8)2. 声明d.ts文件 文件内容。
require引入json报错
qq_45022670的博客
03-01 391
require加载json文件问题
vue3如何获取本地json文件和调用后端接口渲染数据(uniapp&vue3)
qq_48434912的博客
05-16 4283
值得注意的是由于ref原理上是使用proxy代理，所以在赋值时需要.value。
VUE3如何读取本地json文件
热门推荐
黑坑的专栏
11-08 1万+
VUE3如何读取本地json文件
vue3 如何配置请求本地 json 数据
m0_53136368的博客
06-27 3345
1. 创建一个 JSON 文件，例如 `data.json`，并将其放置在 `public` 目录下。在 `public` 目录中的文件可以直接在浏览器中访问，无需经过编译。2. 在组件中使用 `fetch` 或 `axios` 等库来获取 JSON 数据。
vue-cli-service build报错
09-03
当在Vue工程目录下使用`npm run build`命令进行打包时，如果出现报错"'vue-cli-service' 不是内部或外部命令，也不是可运行的程序或批处理文件"，这通常是由于缺少全局安装的`@vue/cli-service`导致的。解决方法如下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值