vue本地访问json没问题,打包上线访问json出现404

2021-01-20 10:22发布

[图]config打包配置如下


config打包配置如下

5条回答
aijingda
2楼 · 2021-01-20 16:15

404通常是访问的路径或api地址或对应的资源不存在,可以仔细检查一下对应的地址是不是正确,有个简单的办法就是直接把地址复制到浏览器打开,或者用postman等工具进行测试。

芒果
3楼 · 2021-01-20 18:45
= 'get','/static/api/form.json'= (xml.readyState==4 && xml.status==200.formLabel ="xmll==="+JSON.stringify(

解决:

放在目录里并不意味能通过http访问。要么另起web服务serve这个目录,要么放在static目录里,因为dev-server对该目录文件实现了http访问。

我是大脸猫
4楼 · 2021-01-21 10:54

在使用vue-cli搭建的vue项目中,使用vue-resource请求本地的json格式数据,来模仿服务端返回数据流程,但是请求不到json数据,返回404。
这里写图片描述

在网上查询了大量资料,大都是以前的版本,在build的dev-server.js中进行修改。但是最新的版本已经废除了dev-sever.js文件。

VUE开发请求本地数据的配置,早期的vue-cli下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-template 中已经去掉了dev-server.js和dev-client.js 改用webpack.dev.conf.js代替,所以 配置本地访问在webpack.dev.conf.js里配置。

但是以上步骤非常麻烦且有很多坑。

解决vue-resource使用本地json模拟服务端数据请求问题:

vue-resource 的安装:

cnpm install vue-resource --save

在main.js中导入并使用

import vueResource from 'vue-resource';
Vue.use(vueResource);

模拟后台数据的json文件必须放在static目录下,其他目录不能访问

这里写图片描述

读取数据

这里写图片描述

调用成功之后返回数据

这里写图片描述


椰子椰子
5楼 · 2021-01-21 17:20

在使用vue-cli搭建的vue项目中,使用vue-resource请求本地的json格式数据,来模仿服务端返回数据流程,但是请求不到json数据,返回404。

py大白
6楼 · 2021-01-22 08:46

在网上查询了大量资料,大都是以前的版本,在build的dev-server.js中进行修改。但是最新的版本已经废除了dev-sever.js文件。

VUE开发请求本地数据的配置,早期的vue-cli下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-template 中已经去掉了dev-server.js和dev-client.js 改用webpack.dev.conf.js代替,所以 配置本地访问在webpack.dev.conf.js里配置。

但是以上步骤非常麻烦且有很多坑。

解决vue-resource使用本地json模拟服务端数据请求问题:

vue-resource 的安装:

cnpm install vue-resource --save

在main.js中导入并使用

import vueResource from 'vue-resource';
Vue.use(vueResource);

模拟后台数据的json文件必须放在static目录下,其他目录不能访问


相关问题推荐

  • 回答 14

    1.重构响应式系统,使用Proxy替换Object.defineProperty,使用Proxy优势:•可直接监听数组类型的数据变化•监听的目标为对象本身,不需要像Object.defineProperty一样遍历每个属性,有一定的性能提升•可拦截apply、ownKeys、has等13种方法,而Object.define...

  • 回答 12

    vue页面跳转后返回原页面初始位置        vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?首先我们应该在跳出页面时候记录下跳出的scrollY,返回原页面的时候在设置返回位置为记录下的scrolly...

  • MVVM和MVM的不同?2020-05-09 15:51
    回答 9

    这个问题建议你系统了解下MVC→MVP→MVVM的进化历程。(1)首先说下MVC    MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写。MVC开始是存在于桌面程序中,使用MVC的目的是将M和V的实现代码分离。从图里可以看...

  • 回答 13

    目前,对于SEO支持比较好的项目方案是采用服务端渲染。所以如果项目有SEO需求,那么比较好的方案是服务端渲染。如果你已经采用了前后分离的单页项目,而你的网站内容不需要AJAX去获取内容和展示内容,那么可以试试 prerender-spa-plugin 这个插件,这个插件是...

  • vue和bootstrap的区别2021-10-14 11:13
    回答 19

    Bootstrap和vue不是一个层级的东西.Bootstrap是在jquery时代的UI组件库,而且Bootstrap大部分组件是依赖css的,依赖jQuery的组件主要是有交互的弹窗组件、下拉菜单等

  • 回答 13

    首先你需要引入另一个界面,然后通过$refs.refName的方式调用弹框的方法后者直接把弹框的属性置成true。注意需要另一个页面渲染完成后才能用【$refs.refName】

  • 回答 16

    是的,前端不会Vue根本就没必要再聊下去了

  • 回答 7

    这里有一篇文章可以帮助你https://blog.csdn.net/qq_40282732/article/details/105962708

  • 回答 5

    内部图表大小是与div容器大小位置相关的,如果想调整图表大小位置,调整div的属性就可以。如果是想调整图表与div间上下左右留白,则设置grid属性就可以。

  • 回答 7

    使用 /deep/ 注意:使用 cass 和 less 只能使用 /deep/ 这个方法

  • 回答 4

    创建icons/svg文件夹将svg文件放在该文件夹下面在components文件夹中创建svgiconfont.vue文件文件内容:        [removed]  import '@/icons'  export default {    name: 'svg-icon',    props: {      iconClass: {      ...

  • 回答 3

    引用数据类型数组的元素是对象引用,没有实际的值,需要给它实例。例如date days = new date[5];days[0]  = new date(2000,12,3)每一个days都要去分配。而基础类型都有默认初始值。

  • 回答 5

    计算属性与响应式并不冲突对立的存在,计算属性往往是用于数据的聚合或者离散,数据响应式的话就是视图响应数据变动(先容我装个逼)在vue中就是通过watcher调用一次实例对象中data的数据(当然这层数据也会做一层映射,映射到实例的属性中)在数据的defineOb...

  • 回答 3

    Vue中有一个自带的transition组件,就是用来实现过渡效果的,具体怎么使用呢,很简单,其实就两个步骤:①用transition组件,把要做过渡效果的元素包起来②写上相应的过渡效果的css是不是很简单,比把大象装冰箱还简单。然而,并没有,在这两个步骤中,我们要...

没有解决我的问题,去提问