本篇文章为大家展示了怎么在vue-cli3中使用mock数据，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
创新互联公司是一家以网络技术公司，为中小企业提供网站维护、
网站建设、网站制作、网站备案、服务器租用、
域名注册、软件开发、小程序制作等企业互联网相关业务，是一家有着丰富的互联网运营推广经验的科技公司，有着多年的网站建站经验，致力于帮助中小企业在互联网让打出自已的品牌和口碑，让企业在互联网上打开一个面向全国乃至全球的业务窗口：建站欢迎咨询：18980820575
在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);
})
}后面的before(app)部分就定义了可以通过向/goods/list发送get请求来得到我们要的json文件。
同事我们在vue文件中只要
// 利用了axios
axios.get("/goods/list").then(res => {
this.goodsList = res.data.result;
}).catch(error=>{
console.log(error);
});就可以请求到数据
vue-cli3
vue-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);
})
}
}
}上述内容就是怎么在vue-cli3中使用mock数据，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。
网站名称：怎么在vue-cli3中使用mock数据-创新互联
当前网址：
http://cdkjz.cn/article/ehpip.html
