vue2.0配置webpack.dev.conf.js加载本地json数据

打开webpack.dev.conf.js

在const portfinder = require(‘portfinder‘)后加入以下配置

1 const express = require(‘express‘)
2 const app = express() // 请求server
3 var appData = require(‘../data.json‘) //加载本地数据
4 var seller = appData.seller //获取对应的数据
5 var goods = appData.goods
6 var ratings = appData.ratings
7 var apiRoutes = express.Router()
8 app.use(‘/api‘, apiRoutes) //通过路由请求数据

在devServer: { }中加入以下配置

 1     before(app) {
 2       app.get(‘/api/seller‘, (req, res) => {
 3         res.json({
 4           errno: 0,
 5           data: seller // 接口返回json数据
 6         })
 7       }),
 8       app.get(‘/api/goods‘, (req, res) => {
 9         res.json({
10           errno: 0,
11           data: goods // 接口返回json数据
12         })
13       }),
14       app.get(‘/api/ratings‘, (req, res) => {
15         res.json({
16           errno: 0,
17           data: ratings // 接口返回json数据
18         })
19       })
20     }
21   }

原文地址:https://www.cnblogs.com/i-Leo/p/9063608.html

时间: 2024-10-31 00:14:38

vue2.0配置webpack.dev.conf.js加载本地json数据的相关文章

使用Sencha Touch加载本地Json数据

本例没有采用Sencha的mvc模式.只是一个简单的读取加载本地Json数据示例. 文档结构如下: app.js代码如下: Ext.require(['Ext.form.Panel', 'Ext.data.Store', 'Ext.data.reader.Json', 'Ext.dataview.DataView']); Ext.application({ name:'MyApp', icon:'images/icon.png', glossOnIcon:false, phoneStarupSc

手撕vue-cli配置——webpack.dev.conf.js篇

const utils = require('./utils') const webpack = require('webpack') const config = require('../config') const merge = require('webpack-merge') const path = require('path') const baseWebpackConfig = require('./webpack.base.conf') //一个拷贝资源的插件,后面我会介绍用法

vue模拟后台数据,请求本地数据的配置(旧版本dev-server.js,新版本webpack.dev.conf.js)

最近学习一个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 旧版

利用js加载本地图片预览功能

直接上代码: 经测试,除safari6包括6以下不支持,其他均可正常显示. 原因:safari6不支持filereader,同时不能使用IE滤镜导致失效. fix: 可以利用canvas,解决safari6的问题 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

vue - webpack.dev.conf.js

1 'use strict' 2 3 // build/util.js 4 const utils = require('./utils') 5 // node_modules里面的webpack 6 const webpack = require('webpack') 7 // config/index.js 8 const config = require('../config') 9 // 对象合并 10 const merge = require('webpack-merge') 11

vue2.0 结合better-scroll 实现下拉加载

一.建议先了解下better-scroll 的介绍 链接:https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better-scroll%20%E6%98%AF%E4%BB%80%E4%B9%88 二.npm 安装 npm install better-scroll --save 三.因为项目里面多个页面会用到上拉加载,所以这里先作为组件来使用,在components新建一个文件夹scroll,然后建立子文件scroll.vue Sc

webpack.dev.conf.js

var utils = require('./utils')var webpack = require('webpack')var config = require('../config') // 一个可以合并数组和对象的插件var merge = require('webpack-merge')var baseWebpackConfig = require('./webpack.base.conf') // 一个用于生成HTML文件并自动注入依赖文件(link/script)的webpack插

vue - webpack.dev.conf.js for merge

webpack-merge提供了一个merge连接数组并合并创建新对象的对象的函数.如果遇到函数,它将执行它们,通过算法运行结果,然后再次将返回的值包装在函数中. 这种行为在配置webpack时特别有用,尽管它有超出它的用途.无论何时需要合并配置对象,webpack-merge都可以派上用场. 栗子: 1 const devWebpackConfig = merge(baseWebpackConfig, { 2 module: { 3 rules: utils.styleLoaders({ so

vue - webpack.dev.conf.js for HtmlWebpackPlugin

描述: 这是一个webpack插件,可以简化HTML文件的创建,为您的webpack捆绑服务提供服务. 这对于webpack包含文件名中包含哈希值的bundle 来说尤其有用,它会更改每个编译. 您可以让插件为您生成HTML文件,使用lodash模板提供您自己的模板或使用您自己的加载器. 官网:https://www.npmjs.com/package/html-webpack-plugin 原文地址:https://www.cnblogs.com/cisum/p/9612459.html