介绍//,引入文件
const goodsList =,要求(& # 39;. ./嘲笑/goods.json& # 39;);//,……//,配置devServer
devServer: {
,,clientLogLevel: & # 39;预警# 39;
,,historyApiFallback: {
,,重写:,
,,,{,:/*/,,:,path.posix.join (config.dev.assetsPublicPath, & # 39; index . html # 39;),},
,,,,
,,},
热点:才能,真的,
contentBase才能:假的,,//,since use CopyWebpackPlugin我方表示歉意。
压缩才能:,真的,
主持人:才能,HOST | |, config.dev.host,
端口:才能,PORT | |, config.dev.port,
,,开放:config.dev.autoOpenBrowser,
覆盖:才能config.dev.errorOverlay
,,,?{,警告:假的,,错误:,true }
,,,:假的,
,,publicPath: config.dev.assetsPublicPath,
代理:才能,config.dev.proxyTable,
安静的才能:真的,,//necessary for FriendlyErrorsPlugin
,,watchOptions: {
,,,调查:config.dev.poll,
,,},
之前才能(app) {
,,app.get(& # 39;/商品/列表# 39;,(要求,res,下一个)=祝辞{
,,,res.json (goodsList);
,,})
以前,,} //,利用了axios
axios.get(“/商品/list") (res =祝辞,{
,,,this.goodsList =, res.data.result;
,,}).catch(错误=祝辞{
,,,console.log(错误);
,,}); const mockdata =,要求(& # 39;。/嘲笑/test.json& # 39;);
module.exports={
,devServer: {
端口:4000年,才能
之前才能(app) {
,,app.get(& # 39;/商品/列表# 39;,(要求,res,下一个)=祝辞{
,,,res.json (mockdata);
,,})
,,}
,}
}
本篇文章为大家展示了怎么在vue-cli3中使用模拟数据,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
在vue-cli构建的项目,我们可以借助devServer开启一个服务,然后我们可以通过路由模拟一个接口来进行测试。
在vue-cli2和vue-cli3中的配置方式是不同的。下面分别展示
# # vue-cli2
先放一张vue-cli2生成项目图片
模拟文件夹是一个我自己创建的用来存放模拟数据的文件夹,其中有一个json文件,下面我们要对构建目录下webpack.dev.conf.js进行配置
后面(应用程序)之前的部分就定义了可以通过向/商品/列表发送得到请求来得到我们要的json文件。
同事我们在vue文件中只要
就可以请求到数据
<强> vue-cli3
vue-cli3主打自动化,0配置。但是我们往往需要进行一些配置,这时我们就要创建一个配置文件。目录结构如下
vue.config。js就是我们手动创建的配置文件,完整的配置项可以在官网看的到,在这里我们着重于devServer
上述内容就是怎么在vue-cli3中使用模拟数据,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注行业资讯频道。
