vue webpack模拟后台数据的示例代码

一、在webpack-dev-conf.js文件中：

1、在const portfinder=require(' portfinder ')后添加如下内容

const express=require(' express ')const app=express()//请求servervar appData=require('./mock/goods.json') //加载本地数据文件var apiRoutes=express .路由器()应用程序。使用(APiRoads)//通过路由请求数据2、找到devServer，在里面加上之前()方法

dev server : { client log level : }警告，historyApiFallback: {重写：[{ from :/} .*/，到：路径。POSIX。加入(配置。戴夫。资产公共路径，' index.html') }，]，}，hot: true，contentBase: false，//因为我们使用了CopyWebpackPlugin .compress: true，host: HOST || config.dev.host，port: PORT || config.dev.port，open : config。戴夫。autoopenbrowser，覆盖：配置。戴夫。错误覆盖？{警告：假，错误：真} :假，公共路径：配置。戴夫。资产公共路径，代理：配置。戴夫。代理表，quiet: true，//friendyerrorsplugin watch options 3360 { poll : config。戴夫。poll，}，before(app) { app.get('/goods '，(req，RES)={ RES . JSON(appData)} }，二、在goods.json文件：

{ '状态' : '0 ','消息' : ','结果： [ { 'productId': '100001 '，' productName': '小米6 '，' productPrice': '2499 '，' productImg': '1.jpg' }，{ 'productId': '100002 '，' productName': '音箱，' productPrice': '999 '，' productImg': '2.jpg' }，{ 'productId': '100003 '，' productName': '电脑，' productPrice': '199 '，' productImg': '3.jpg' } ]}三、在GoodsList.vue文件中：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。