本文例項講述了vue-cli3使用mock資料的方法。分享給大家供大家參考，具體如下：

在前後端分離的開發模式中，後端給前端提供一個介面，由前端向後端發請求，得到資料後前端進行渲染。由於前後端開發進度的不統一，前端往往使用本地的測試資料進行資料渲染的測試。

正文開始

在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,next)=>{
    res.json(mockdata);
   })
  }
 }
}

這樣就達到了相同的效果

希望本文所述對大家vue.js程式設計有所幫助。