使用vue-cli3時怎么mock數據

應用場景

      在前后端分離的開發模式中，后端給前端提供一個接口，由前端向后端發請求，得到數據后前端進行渲染。

      由於前后端開發進度的不統一，前端往往使用本地的測試數據進行數據渲染的測試。

 

如何配置

        在vue-cli構建的項目，我們可以借助devServer開啟一個服務，然后我們可以通過路由模擬一個接口來進行測試。

        在vue-cli2和vue-cli3中的配置方式是不同的。下面分別展示

        

1⃣️ 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);
      });

 

2⃣️ 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);
      })
    }
  }
}