本文实例讲述了vue-cli3使用mock数据的方法。分享给大家供大家参考，具体如下：在前后端分离的开发模式中，后端给前端提供一个接口，由前端向后端发请求，得到数据后前端进行渲染。由于前后端开发进度的不统一，前端往往使用本地的测试数据进行数据渲染的测试。正文开始正文开始在vue-cli构建的项目，我们可以借助devServer开启一个服务，然后我们可以通过路由模拟一个接口来进行测试。在vue-cli2和vue-cli3中的配置方式是不同的。下面分别展示##　vue-cli2先放一张vue-cli2生成项目图片mock文件夹是一个我自己创建的用来存放模拟数据的文件夹，其中有一个json文件，下面我们要对build目录下webpack.dev.conf.js进行配置
// 引入文件
const goodsList = require('../mock/goods.json');
// ……
// 配置devServer
devServer: {

clientLogLevel: 'warning',

historyApiFallback: {

rewrites: [

{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },

],

},

hot: true,

contentBase: false, // since we use CopyWebpackPlugin.

compress: true,

host: HOST || config.dev.host,

port: PORT || config.dev.port,

open: config.dev.autoOpenBrowser,

overlay: config.dev.errorOverlay

? { warnings: false, errors: true }

: false,

publicPath: config.dev.assetsPublicPath,

proxy: config.dev.proxyTable,

quiet: true, // necessary for FriendlyErrorsPlugin

watchOptions: {

poll: config.dev.poll,

},

before(app){

app.get('/goods/list',(req,res,next)=>{

res.json(goodsList);

})

}


// 引入文件
const goodsList = require('../mock/goods.json');
// ……
// 配置devServer
devServer: {

clientLogLevel: 'warning',

historyApiFallback: {

rewrites: [

{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },

],

},

hot: true,

contentBase: false, // since we use CopyWebpackPlugin.

compress: true,

host: HOST || config.dev.host,

port: PORT || config.dev.port,

open: config.dev.autoOpenBrowser,

overlay: config.dev.errorOverlay

? { warnings: false, errors: true }

: false,

publicPath: config.dev.assetsPublicPath,

proxy: config.dev.proxyTable,

quiet: true, // necessary for FriendlyErrorsPlugin

watchOptions: {

poll: config.dev.poll,

},

before(app){

app.get('/goods/list',(req,res,next)=>{

res.json(goodsList);

})

}

后面的before(app)部分就定义了可以通过向/goods/list发送get请求来得到我们要的json文件。同事我们在vue文件中只要
// 利用了axios
axios.get("/goods/list").then(res => {

this.goodsList = res.data.result;

}).catch(error=>{

console.log(error);

});


// 利用了axios
axios.get("/goods/list").then(res => {

this.goodsList = res.data.result;

}).catch(error=>{

console.log(error);

});

就可以请求到数据vue-cli3vue-cli3vue-cli3主打自动化，0配置。但是我们往往需要进行一些配置，这时我们就要创建一个配置文件。目录结构如下vue.config.js就是我们手动创建的配置文件，完整的配置项可以在官网看到，在这里我们着重于devServer
const mockdata = require('./mock/test.json');

module.exports={
devServer: {

port:4000,

before(app){

app.get('/goods/list',(req,res,next)=>{

res.json(mockdata);

})

}
}
}


const mockdata = require('./mock/test.json');

module.exports={
devServer: {

port:4000,

before(app){

app.get('/goods/list',(req,res,next)=>{

res.json(mockdata);

})

}
}
}

这样就达到了相同的效果希望本文所述对大家vue.js程序设计有所帮助。