本篇文章為大家展示了怎么在vue-cli3中使用mock數(shù)據(jù)，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)公司是一家以網(wǎng)絡(luò)技術(shù)公司，為中小企業(yè)提供網(wǎng)站維護(hù)、網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)站備案、服務(wù)器租用、域名注冊(cè)、軟件開(kāi)發(fā)、小程序制作等企業(yè)互聯(lián)網(wǎng)相關(guān)業(yè)務(wù)，是一家有著豐富的互聯(lián)網(wǎng)運(yùn)營(yíng)推廣經(jīng)驗(yàn)的科技公司，有著多年的網(wǎng)站建站經(jīng)驗(yàn)，致力于幫助中小企業(yè)在互聯(lián)網(wǎng)讓打出自已的品牌和口碑，讓企業(yè)在互聯(lián)網(wǎng)上打開(kāi)一個(gè)面向全國(guó)乃至全球的業(yè)務(wù)窗口：建站歡迎咨詢：18980820575

在vue-cli構(gòu)建的項(xiàng)目，我們可以借助devServer開(kāi)啟一個(gè)服務(wù)，然后我們可以通過(guò)路由模擬一個(gè)接口來(lái)進(jìn)行測(cè)試。

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

##　vue-cli2

先放一張vue-cli2生成項(xiàng)目圖片

mock文件夾是一個(gè)我自己創(chuàng)建的用來(lái)存放模擬數(shù)據(jù)的文件夾，其中有一個(gè)json文件，下面我們要對(duì)build目錄下webpack.dev.conf.js進(jìn)行配置

// 引入文件
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)部分就定義了可以通過(guò)向/goods/list發(fā)送get請(qǐng)求來(lái)得到我們要的json文件。

同事我們?cè)趘ue文件中只要

// 利用了axios
axios.get("/goods/list").then(res => {
    this.goodsList = res.data.result;
   }).catch(error=>{
    console.log(error);
   });

就可以請(qǐng)求到數(shù)據(jù)

vue-cli3

vue-cli3主打自動(dòng)化，0配置。但是我們往往需要進(jìn)行一些配置，這時(shí)我們就要?jiǎng)?chuàng)建一個(gè)配置文件。目錄結(jié)構(gòu)如下

vue.config.js就是我們手動(dòng)創(chuàng)建的配置文件，完整的配置項(xiàng)可以在官網(wǎng)看到，在這里我們著重于devServer

const mockdata = require('./mock/test.json');

module.exports={
 devServer: {
  port:4000,
  before(app){
   app.get('/goods/list',(req,res,next)=>{
    res.json(mockdata);
   })
  }
 }
}

上述內(nèi)容就是怎么在vue-cli3中使用mock數(shù)據(jù)，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站名稱(chēng)：怎么在vue-cli3中使用mock數(shù)據(jù)-創(chuàng)新互聯(lián)
網(wǎng)站URL：http://www.chinadenli.net/article8/ehpip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、響應(yīng)式網(wǎng)站、網(wǎng)站策劃、App設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)