关于vue-cli2.9.1之后数据mock的配置问题

在老版本(具体指vue-cli 2.9.1之前)的版本,数据的mock导入主要通过以下方式
在bulid目录下找到dev-server.js文件,打开编辑
    (**关于dev-server.js文件:
        这个文件里记录的是项目的服务器配置,事实上运行服务器所使用的
            npm run dev
        命令,经过配置文件package.json后也是启动这个文件)

var app=express();

在此代码之后添加代码

定义数据接口

var appData=require('../data.json')//此处括号内的目录是你要mock的数据的目录

定义具体要mock的数据
例如我的data.json中主要有三个部分,seller,goods,ratings
mock数据就是seller(商家数据),goods(商品数据),ratings(评论数据)

var seller = appData.seller
var goods = appData.goods
var ratings = appData.ratings

然后定义路由

var appRoutes=express.Router();
appRoutes.get('/seller',(req,res)=>{
	res.json({
		errno:0,
		data:seller
	})
})
appRoutes.get('/goods',(req,res)=>{
	res.json({
		errno:0,
		data:goods
	})
})
appRoutes.get('/ratings',(req,res)=>{
	res.json({
		errno:0,
		data:ratings
	})
})

    *********注意此处的errno,在实际的项目中错误代码可能多种多样,但是此处只是简略地说明配置问题

 

然而在vue-cli的新版本(具体指2.9.1之后)的版本中,因为dev-server.js文件被整合到webpack.dev.conf.js中,
所以要换方式定义,具体如下

在bulid目录下找到微博pack.dev.conf.js,编辑文件

(引入数据和定义数据和以前一样,故此处略去)

 

然后在devWebpackConfig的定义中找到devServer项,在末尾添加以下代码
(这里的app不需要定义)

before(app){
	app.get('/seller',(req,res)=>{
		res.json{
			errno:0,
			data:seller
		}
	},
	app.get('/goods',(req,res)=>{
		res.json{
			errno:0,
			data:goods
		}
	},
	app.get('/ratings',(req,res)=>{
		res.json{
			errno:0,
			data:ratings
		}
	}
}

*********注意别忘记before前面的逗号