vue-cli搭建项目模拟后台接口数据,webpack-dev-conf.js文件配置

首先第一步

const express = require(‘express‘)
const app = express()
var appData = require(‘../data.json‘)
var seller = appData.seller
var goods = appData.goods
var ratings =appData.ratings
var apiRoutes = express.Router()
app.use(‘/api‘,apiRoutes)

第二步找到devServer,添加以下代码

before(app) {
      app.get(‘/api/seller‘, (req, res) => {
        res.json({
          // 这里是你的json内容
          errno: 0,
          data: seller
        })
      }),
      app.get(‘/api/goods‘, (req, res) => {
        res.json({
          // 这里是你的json内容
          errno: 0,
          data: goods
        })
      }),
      app.get(‘/api/ratings‘, (req, res) => {
        res.json({
          // 这里是你的json内容
          errno: 0,
          data: ratings
        })
      })
    }
时间: 2024-11-05 14:48:38

vue-cli搭建项目模拟后台接口数据,webpack-dev-conf.js文件配置的相关文章

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 旧版

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 = app

vue cli搭建项目及文件引入

cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载东西有时会快一些 2.cnpm i -g vue-cli  //安装 vue-cli,i:install 安装,-g:全局,哪儿都可以使用. 3.vue init webpack-simple ProjectName //webpack-simple:使用webpack-simple模板,proje

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

vue - webpack.dev.conf.js for FriendlyErrorsPlugin

描述:webpack网页端友好的报错信息就来自它 官网:https://www.npmjs.com/package/friendly-errors-webpack-plugin 1 new FriendlyErrorsPlugin({ 2 // 运行成功 3 compilationSuccessInfo:{ 4 message:['你的应用程序在这里运行http:// localhost:3000'], 5 notes:['有些附加说明要在成功编辑时显示'] 6 }, 7 // 运行错误 8 o

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

vue - webpack.base.conf.js

描述:webapck基本配置文件. 为了给开发文件和打包文件(webpack.dev.conf.js|| webpack.prod.conf.js) 提供方便. 1 'use strict' 2 // 路径 3 const path = require('path') 4 // build/utils.js 5 const utils = require('./utils') 6 // config/index.js 7 const config = require('../config') 8

fetch 代替 XMLHttpRequest (json-server 模拟后台接口)

一.fetch 是 XMLHttpRequest 的替代方案.说白了就是除了 ajax 获取后台数据之外也可以用fetch 来获取. 二.fetch 的支持性还不是很好.挂载于BOM中可以通过浏览器直接访问. 1.支持情况 当然,如果不支持fetch也没有问题,可以使用第三方的ployfill来实现只会fetch:whatwg-fetch 三.JSON-SERVER模拟后台接口 1.初始化项目 npm init 2.安装JSON-SERVER:  npm install --save-dev j