最新的vue webpack没有dev-server文件，如何实现mock后台数据模拟

程序员文章站 2022-05-12 13:01:02

...

dev-server文件在最新的vue版本中是webpack.dev.conf.js
代码没有太大变动，只是语法上有一些改变
！！修改后一定重新启动npm run dev,才能访问到接口数据
webpack.dev.conf.js文件

const express = require('express')
const app = express()//请求server
var goodsData = require('../mock/goods')//加载本地数据文件
var router = express.Router()
app.use(router)//通过路由请求数据

......
devServer: {
...
,  before(app){
      app.get('/goods',(req,res)=>{
        res.json(goodsData);
      })
    }
}

mock数据
goods.json

{
  "status":"0",
  "msg":"",
  "result":[
    {
      "productId":100001,
      "productName":"音响",
      "productPrice":"199",
      "productImg":"1.jpg"
    },
    {
      "productId":100002,
      "productName":"入耳式耳机",
      "productPrice":"99",
      "productImg":"2.jpg"
    },
    {
      "productId":100003,
      "productName":"头戴式耳机",
      "productPrice":"399",
      "productImg":"3.jpg"
    },
    {
      "productId":100004,
      "productName":"头戴式耳机",
      "productPrice":"399",
      "productImg":"4.jpg"
    },
    {
      "productId":100005,
      "productName":"充电宝",
      "productPrice":"99",
      "productImg":"5.jpg"
    }
  ]
}

前端组件代码实现
GoodList.vue

      <li v-for = "(item,index) in goodsList">
                  <div class="pic">
                    <a href="#"><img v-bind:src="'/static/'+item.productImg" alt=""></a>
                  </div>
                  <div class="main">
                    <div class="name">{{ item.productName}}</div>
                    <div class="price">{{ item.productPrice}}</div>
                    <div class="btn-area">
                      <a href="javascript:;" class="btn btn--m">加入购物车</a>
                    </div>
                  </div>
                </li>