vue模拟后台数据，请求本地数据的配置（旧版本dev-server.js，新版本webpack.dev.conf.js）
时间： 20:51:23
&&&& 阅读：977
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&最近学习一个vue-cli的项目，需要与后台进行数据交互，这里使用本地json数据来模仿后台数据交互流程。然而发现build文件夹下没有dev-server.js文件了，因为新版本的vue-webpack-template 中已经去掉了dev-server.js，取而代之的是webpack.dev.conf.js文件，所以可以在webpack.dev.conf.js里配置本地访问。
对比旧版本的build文件夹，新版本的build下少了dev-server.js和dev-client.js
新版本配置webpack.dev.conf.js进行本地数据访问，在const portfinder = require(‘portfinder’)后添加
const express = require(‘express‘)
const app = express()
//创建express应用程序
var appData = require(‘../data.json‘)//加载本地数据文件
var seller = appData.seller//获取对应的本地数据
var goods = appData.goods
var ratings = appData.ratings
var apiRoutes = express.Router()
// 获取一个 express 的路由实例
app.use(‘/api‘, apiRoutes)
其中，app.use是express“调用中间件的方法”。所谓“中间件（middleware），就是处理HTTP请求的函数，用来完成各种特定的任务，比如检查用户是否登录、分析数据、以及其他在需要最终将数据发送给用户之前完成的任务。”。这是阮一峰文章的原话。
简而言之，app.use() 里面使用的参数，主要是函数。但这个使用，并不是函数调用，而是使能的意思。当用户在浏览器发出请求的时候，这部分函数才会启用，进行过滤、处理。
然后在下面找到devServer,在里面添加
before(app) {
app.get(‘/api/seller‘, (req, res) =& {
res.json({
data: seller
})//接口返回json数据，上面配置的数据seller就赋值给data请求后调用
app.get(‘/api/goods‘, (req, res) =& {
res.json({
data: goods
app.get(‘/api/ratings‘, (req, res) =& {
res.json({
data: ratings
本地data.json数据放在根目录下与index.js同级,重行执行npm run dev,输入 &localhost:8080/api/seller，结果如下：
已经请求到了本地数据
&标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&原文：http://www.cnblogs.com/chen-cong/p/8001352.html
教程昨日排行
&&国之画&&&& &&&&&&
&& &&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！当前位置： >
vue配置请求本地json数据的方法
栏目： 来源：
本篇文章主要介绍了vue配置请求本地json数据的方法，分享给大家，具体如下：
在build文件夹下找到webpack.dev.conf.js文件，在const portfinder = require('portfinder')后添加
const express = require('express')
const app = express()
const appData = require('../data.json') // 加载本地json文件
const seller = appData.seller // 获取对应本地数据
const goods = appData.goods
const ratings = appData.ratings
const apiRoutes = express.Router()
app.use('/api',apiRoutes)
然后找到devServer，插入以下代码：
//然后找到devSeerver，在里面添加
before (app) {
app.get('/api/seller',(reg,res) =& {
res.json({
data: seller
}) // 接口返回json数据，上面配置的数据seller就复制给data请求后调用
app.get('/api/goods',(reg,res) =& {
res.json({
data: goods
}) // 接口返回json数据，上面配置的数据goods就复制给data请求后调用
app.get('/api/ratings',(reg,res) =& {
res.json({
data: ratings
}) // 接口返回json数据，上面配置的数据ratings就复制给data请求后调用
import header from './components/header/header.vue'
const ERR_OK = 0
export default {
seller: {}
created () {
this.$$http.get('/api/seller').then((response) =& {
response = response. // 获取到数据
if (response.errno === ERR_OK) {
this.seller = response.
console.log(this.seller);
components: {
'v-header': header
最后重新启动项目即可访问npm run dev本文出自汗血宝马，转载时请注明出处及相应链接。
本文永久链接: http://www.caotama.com/73948.html
Ɣ回顶部其实关于这个问题，网上已经可以找到些方法，不过基本上没有完整的，或者是其中有些坑，下面写一下自己的亲身实践。使用vue读取本地json文件需要安装vue-resource插件，然后使用它的$http.get来读取json文件。json文件应该是必须放在static目录下然后使用npm install 命令安装vue-resource，太慢的话就使用淘宝镜像安装,安装完成后先引用这个组件。在main.js文件中添加：import VueResource from 'vue-resource'然后：Vue.use(VueResource)最后读取json数据：this.$http.get('static/map/china.json').then(res =& {
console.log("json数据为:" + res.body)//此处的res对象包含了json的文件信息和数据，我们需要的json数据存在于body属性中
})这样就能读取json数据了
vue访问本地静态json文件
1、将写好的 data.json 文件放入static目录2、访问路径 get(&./../static/data.json&)...
vue-resource请求本地json文件
在平时项目开发中，有时后台接口跟不上前台开发的进度时，需要我们自己写先写本地的json文件，这样我们可以把静态界面和逻辑一起调试了，等后台来了接口，替换请求地址即可。但是在vue的项目中，网路请求不是...
Vue如何加载本地json文件
在项目开发的过程中，如果后台接口还未开发完成，这个时候所以我们可以自建一个假数据文件(如data.json)到项目文件夹中，这样我们就可以模仿后台的数据进行开发。但是，如何在一个vue.js 项目中引...
Vue读取本地文件
博主从网上搜各种读取本地json文件的方法，都没实现想要的功能：
在网页上选取本地文件，然后读取其中数据。
最后发现FileReader这个函数，问题解决。具体见链接。
参考出处 ： http:...
Vue项目调用本地的json文件
有时候我们需要自己造点数据来用，仿后台数据：
目前用的是Vue来做项目，我自己试着在src里建了一个json文件，用axios调用了一下，果然报错了，404找不到这个json文件，可是我写的相对路径...
vue.js如何加载本地json文件
原文转载至：https://www.cnblogs.com/momozjm/p/6271249.html在项目开发的过程中，如果后台接口还未开发完成，这个时候所以我们可以自建一个假数据文件(如data...
Vue2.0使用axios引入本地JSON文件踩的坑
今天学习Vue2.0使用axios引入本地JSON文件踩的坑。
1.如何引入axios，import、prototype
本地JSON文件需放在static文件夹之下。（以及图片文件）...
vue加载本地json文件
我们在基于Webpack的vue项目里面执行npm
run build命令后，会生成一个服务，http://localhost:8080
我们通过他可以访问我们vue项目，
如图所示配置：
Vue设置本地数据接口(json)
1. 我们知道在2.9.1的版本中没有express。
a) npm install express –D
b) npm install vue-resource -S2....
vue调本地json文件
方法1import data from '@/assets/data.json'
console.log(data);方法2安装npm install axiosimport axios from '...
没有更多推荐了，在项目开发的过程中，如果后台接口还未开发完成，这个时候所以我们可以自建一个假数据文件(如data.json)到项目文件夹中，这样我们就可以模仿后台的数据进行开发。但是，如何在一个vue.js 项目中引入本地的json文件呢，下面就将步骤贴出来。
整个项目是由vue-cli脚手架搭建而成。具体项目结构如下：
1：首先我们使用vue-cli脚手架工具打包成上图所示的样子，不会vue-cli请跳转至这里：
2：我们找到bulid&dev-server.js,然后打开
3：在里面加入这段代码，大概在20行左右）。
var app = express()
从这后面开始加
var goodsData = require('../data.json')
var router = express.Router()
router.get("/goods", function (req,res) {
res.json(goodsData)
app.use(router)
这里用到的是node.js+express框架的知识。
4：将json文件放入项目中
"status":"0",
"result":[
"productId":"10001",
"productName":"小米6",
"prodcutPrice":"2499",
"prodcutImg":"mi6.jpg"
"productId":"10002",
"productName":"小米笔记本",
"prodcutPrice":"3999",
"prodcutImg":"note.jpg"
"productId":"10003",
"productName":"小米6",
"prodcutPrice":"2499",
"prodcutImg":"mi6.jpg"
"productId":"10004",
"productName":"小米6",
"prodcutPrice":"2499",
"prodcutImg":"1.jpg"
"productId":"10001",
"productName":"小米6",
"prodcutPrice":"2499",
"prodcutImg":"mi6.jpg"
"productId":"10002",
"productName":"小米笔记本",
"prodcutPrice":"3999",
"prodcutImg":"note.jpg"
"productId":"10003",
"productName":"小米6",
"prodcutPrice":"2499",
"prodcutImg":"mi6.jpg"
"productId":"10004",
"productName":"小米6",
"prodcutPrice":"2499",
"prodcutImg":"1.jpg"
5： 在某个组件中使用axios或者vue-resource调用:
import axios from 'axios'
export default{
mounted () {
this.getGoodsList()
methods: {
getGoodsList () {
axios.get('/goods').then((res) =& {
var result = res.data
console.log(result)
6：页面中打印这个结果：
阅读(...) 评论()