亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

使用vue-cli加載不到dev-server.js的數據mock配置

標簽:
Vue.js

原来的vue-cli 在 vue init webpack 文件名之后,在build目录下会生成dev-server.js文件,可以在页面请求本地数据的时候使用。但是最新版本的vue中,并没有找到这个文件。
因为最新版本的vue-cli已经放弃dev-server.js,只需在webpack.dev.conf.js配置就行

处理

我们可以在webpack.dev.conf.js里面进行相关配置

在const portfinder = require(‘portfinder’)后添加
const express = require('express')        //引入expressconst app = express()              
var appData = require('../data.json')      //本地的数据源var goods = appData.goods                 //取得特定数据var seller = appData.sellervar ratings = appData.ratingsvar apiRoutes = express.Router()     //创建路由 app.use('/api', apiRoutes)

https://img1.sycdn.imooc.com//5d58ac270001be3306350402.png

image.png

找到devServer,在里面添加
//添加相关路由before (app) {
      app.get('/api/seller', (req, res) => {
        res.json({
          errno: 0,
          data: seller
        })
      })
      app.get('/api/goods', function (req, res) {
        res.json({
          errno: 0,
          data: goods
        })
      })
      app.get('/api/ratings', function (req, res) {
        res.json({
          errno: 0,
          data: ratings
        })
      })
    }
  },

https://img1.sycdn.imooc.com//5d58ac2c0001b3fc06760909.png

image.png

然后npm run dev,一定要重启 一下就可以http://localhost:8080/api/goods 访问到你要的数据了

https://img1.sycdn.imooc.com//5d58ac2e000115b408920832.png

image.png

旧版对比

旧版dev-server.js配置本地数据访问:
在const app = express()后,const compiler = webpack(webpackConfig)前配置就可以

var appData = require('../data.json')var seller = appData.seller 
var goods = appData.goods 
var ratings = appData.ratings 
var foods = appData.foods  
var apiRoutes = express.Router() 
apiRoutes.get('/test', function (req, res) { 
  res.json({ errno: 0, data:test })
}) 
app.use('/api',apiRoutes)



作者:阿r阿r
链接:https://www.jianshu.com/p/16559c65e050


點擊查看更多內容
1人點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消