vue cli3.0用axios调用本地json数据一直报404

最新推荐文章于 2020-04-22 15:24:31 发布
最新推荐文章于 2020-04-22 15:24:31 发布
阅读量2k 收藏 1
点赞数 1
分类专栏： vue 文章标签： vue vue cli3.0 本地json数据一直报404
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cssking0/article/details/85329269
版权

 

 

最近在基于vue做后台管理系统时，用了vue cli3.0用axios调用本地json数据一直报404，市面上所有的解决办法都没用，快崩溃了，结果最后发现原因是，vue cli3.0 public 文件夹才是静态资源文件，问题解决，记录一下，以后不再踩坑。

凌乱小青年
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
【vue】vue-cli3中用axios访问本地json文件报错404
weixin_46682277的博客
04-13 1328
去访问时，却报错404了。文件保存到本地时，通过。
VUE小项目问题之用axios插件取本地json文件，报404错误。
yan263364的博客
09-03 4750
一、问题 在用axios获取本地json数据时，总是报404错误。 百思不得其解。 二、经过 看网友们都是把本地json文件放在static文件中。 我写的项目存放在assets中，恍然大悟，应该是文件位置。 三、结果 文件改存为static axios({ method: method, url: url, data: method === 'P...
vue-cli 中用axios请求本地json报 404
NB_666的博客
04-15 5506
需要把json文件放在static文件夹下面 这是vue-cli内置服务器对外暴露静态资源的位置记录一下
vue axios中本地get请求json出现404
zhanglijiang_2017的博客
09-05 1万+
        get请求报404的时候，需要把json文件放在static文件下（post方式没找到解决方法）
在vue-cli3中使用axios获取本地json操作
10-15
本文将详细介绍如何使用axios库在vue-cli3项目中获取本地JSON文件，以便于在开发环境中模拟真实的数据请求。 Vue CLI 3是Vue.js官方提供的一个脚手架工具，它提供了一种快速构建Vue应用的模板方式。在Vue CLI 3中，...
详解VUE调用本地json的使用方法
10-17
接下来，在Vue组件中引入Axios，并在`mounted`生命周期钩子中调用JSON数据： ```html <!-- 渲染表格等内容 --> import axios from 'axios' export default { data() { return { res: '', // 创建一个对象...
详解vue-cli 脚手架项目-package.json
10-19
对于使用`vue-cli`创建的项目而言，`package.json`文件扮演着核心角色，它不仅定义了项目的元数据，还包含了项目的配置信息、脚本命令及项目依赖等。 #### 项目元数据 `package.json`文件首先定义了一些基本的项目...
浅谈在Vue-cli里基于axios封装复用请求
11-26
在Vue CLI环境中，基于axios进行API请求的封装和复用是一项常见的优化实践，这不仅可以提高代码的可维护性，还能确保请求的标准化。首先，我们需要安装axios库，这是通过运行`npm install axios --save`来完成的，这...
【vue】在vue-cli2下用axios模拟请求本地数据
Liz's blog hut.
10-24 2755
前请提要： 在未与后台进行交互时，前端先自行对接口进行测试是很有必要的。那么，要如何来模拟数据请求呢？如何请求本地的json文件呢？接下来将会详细说明。 创建一个json文件（存放未知自行选择，这里我选择放在全局目录下）——db.json。 { &amp;amp;quot;student&amp;amp;quot;:[ { &amp;amp;quot;name&amp;amp;quot;: &amp;amp;quot;Liz&a
vue之axios请求数据本地json
mentalitys的博客
06-19 2330
1.下载插件 npm install axios --save 2.下载vue-axios npm install --save axios vue-axios 3.在main.js下引用axios import Vue from 'vue' import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(Vu...
VUE中axios请求本地json，报404
yueyekkx的博客
04-22 3377
刚接触vue不是很熟，这个问题一直困惑很长时间。 vue cli2和vue cli3搭建的项目两种不同的目录结构； 一种有static目录；静态资源存放在static下 高版本没有static目录，有public目录；静态资源存放在public下 所以解决方案也不一样； 1、static版 axios.get("./static/json/map/100000.json", {}) ...
Vue访问加载本地Json（渲染模版数据）时遇到的坑，报undefined
weixin_33767813的博客
03-20 2756
Vue访问加载本地Json时，使用模版语法会遇到的小问题这两天在公司做一个H5宣传页面，内容比较简单。首先是通过axios获得到的json
Vue cli3 & axios访问本地json出现404
xjh01的博客
01-28 895
在练习时，用vue cli3搭建项目，用axios访问本地json数据，提示404错误。 一开始搜索得到的解决方案，是要把json数据放进，项目根目录的static文件夹内。因为static是vue向外曝露的服务器目录。尝试仍然不行。 再次搜索，得到的解决方案是，要把json数据放进public文件夹内，因为vue cli3把以前的static改成public。尝试后仍然不行，如下图： ![微信截...
vue-cli 项目打包后 代理接口报404错误 解决办法！
热门推荐
Ryan1437520的博客
08-23 2万+
1、启动nginx          cd usr/local/nginx/sbin         ./nginx 2、找到nginx安装目录     whereis nginx     cd usr/local/nginx/ 3、打开nginx 配置文件     cd conf/     vi nginx.conf    按i 修改，新增配置 location /api {...
vue-cli3中如何使用axios获取本地的json数据
huangguangyourena的博客
06-21 2万+
最近正在写自己的个人博客项目，所以遇到的问题都会放到csdn中。 那么开始吧。 首先我们要确定json数据存放的位置，在vue-cli3中，存放静态资源的位置已经变成存放在public文件夹中了，如下图。所以如果要获取本地的json数据，那么首先要把数据放到这个文件夹下。 由于我在项目中使用了vuex，因此我把aioxs获取数据写在了vuex的actions,如下图，这里在actions中使用...
vue-cli3通过axios获取本地json数据，vue.config.js配置mock数据
Yanfengting的博客
03-12 8750
这里我首先要解决的问题是： 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 调用本地数据模拟后台请求
huijianpang的专栏
01-11 4665
初学，记录一下，备用。 1.文件目录 2. 配置express 和 dev server vue.config.js  3.其实不需要，主要是为了以后加服务器地址以及公共入参用的 4.配置axios访问   5.页面调用 api/income路径中的api可以放到config中的serverPath中  ...
vue2脚手架，axios的baseURL如何根据环境文件使用，以及使用环境文件的详细步骤，以及npm如何引入env；vue.config.js中切换环境
最新发布
06-07
在 Vue2 脚手架中，可以通过使用不同的环境文件来配置不同的 baseURL。下面是详细步骤： 1. 创建环境文件 在项目根目录下，可以创建以下三个环境文件： - `.env`：默认的环境文件，适用于所有情况。 - `.env.development`：用于开发环境。 - `.env.production`：用于生产环境。 在环境文件中，可以添加相应的变量，比如： ``` VUE_APP_API_BASE_URL=http://localhost:8000 ``` 2. 引入环境文件 在 Vue2 中，默认情况下并不会自动引入环境文件中的变量，需要手动引入。可以在 `main.js` 文件中添加以下代码： ``` import dotenv from 'dotenv' dotenv.config() ``` 这样就可以在应用程序中使用环境变量了。 3. 使用环境变量 在应用程序中，可以通过 `process.env` 来访问环境变量。比如，在使用 axios 时，可以根据不同的环境文件设置不同的 baseURL，如下所示： ``` import axios from 'axios' const instance = axios.create({ baseURL: process.env.VUE_APP_API_BASE_URL }) export default instance ``` 这样就可以根据不同的环境文件来配置不同的 baseURL，实现不同环境下的 API 调用。 4. 切换环境 在开发过程中，可以通过设置 `NODE_ENV` 变量来切换不同的环境。比如，在使用 `vue-cli-service` 命令启动开发服务器时，可以设置 `NODE_ENV` 变量，如下所示： ``` NODE_ENV=development vue-cli-service serve ``` 这样就会自动加载 `.env.development` 文件中的变量，实现开发环境的配置。在构建生产版本时，可以设置 `NODE_ENV` 变量为 `production`，如下所示： ``` NODE_ENV=production vue-cli-service build ``` 这样就会自动加载 `.env.production` 文件中的变量，实现生产环境的配置。 5. 使用 npm 引入环境变量 可以使用 `dotenv` 包来引入环境变量。首先，需要安装 `dotenv` 包： ``` npm install dotenv --save-dev ``` 然后，在 `package.json` 文件中添加以下代码： ``` "scripts": { "serve": "NODE_ENV=development vue-cli-service serve", "build": "NODE_ENV=production vue-cli-service build", "start": "node -r dotenv/config ./node_modules/.bin/vue-cli-service serve" }, ``` 这样，就可以使用 `npm start` 命令来启动开发服务器，并自动加载环境变量了。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值