vue-cli的build的資料夾下沒有dev-server.js檔案,怎麼配置mock資料。---mock資料配置(一)

納蘭不是容若發表於2018-03-27

最近在看vue的一些視訊課程,老師講到mock資料時,我發現自己建立的專案並沒有dev-server.js,於是就在網上各種找資料,最後看到這篇文章後http://618cj.com/2017/11/22才恍然大悟。

因為最新版本的vue-cli已經放棄dev-server.js,只需在webpack.dev.conf.js配置就行。

新版本webpack.dev.conf.js配置如下:

在const portfinder = require(‘portfinder’)後新增

const express=require('express');
const app=express();
var appData=require('../data.json');
var seller=appData.seller;
var goods=appData.goods;
var ratings=appData.ratings;

var apiRouter=express.Router();
app.use('/api',apiRouter);
複製程式碼

然後找到devServer,在裡面新增

before(app){
      app.get('/api/seller',(req,res)=>{
        res.json({
          errno:0,
          data:seller
        })
      }),
      app.get('/api/goods',(req,res)=>{
        res.json({
          errno:0,
          data:goods
        })
      }),
      app.get('/api/ratings',(req,res)=>{
        res.json({
          errno:0,
          data:ratings
        })
      })
    }
複製程式碼

重啟專案 npm run dev,訪問localhost:8080/api/goods就可看到資料了

截圖如下:

vue-cli的build的資料夾下沒有dev-server.js檔案,怎麼配置mock資料。---mock資料配置(一)
vue-cli的build的資料夾下沒有dev-server.js檔案,怎麼配置mock資料。---mock資料配置(一)
vue-cli的build的資料夾下沒有dev-server.js檔案,怎麼配置mock資料。---mock資料配置(一)

相關文章