天天看點

vue更新後删除了dev-server.js,背景資料模拟或開發本地請求本地資料配置在webpack.dev.conf.js

根據學習發現vue現在新版是沒有dev-server.js的,現在所有的背景資料模拟或開發本地請求本地資料配置都在webpack.dev.conf.js配置使用。

舊版源碼都是在dev-server.js配置好可以用的,但新版隻能在webpack.dev.conf.js重新更改配置。

一,建立好開發架構的執行個體等

不管是舊版dev-server.js還是新版webpack.dev.conf.js,用什麼就建立好什麼(這裡也用到axios處理資料):

const express = require('express')
const axios = require('axios')
const app = express()
const apiRoutes = express.Router()
app.use('/api', apiRoutes)
           

ps:舊版dev-server.js 裡這代碼app.use(’/api’, apiRoutes),一般放在寫好的json資料下面。

二,請求配置get

舊版dev-server.js:

vue更新後删除了dev-server.js,背景資料模拟或開發本地請求本地資料配置在webpack.dev.conf.js

元件資料請求是在server端,server端再去url那個網站服務端請求資料。請求fcg有接口限制:有請求頭(Request Headers)需要用到host(域名)和referer(請求來源)。

新版webpack.dev.conf.js:

在devServer的裡面加上before()方法

vue更新後删除了dev-server.js,背景資料模拟或開發本地請求本地資料配置在webpack.dev.conf.js

ps:若這裡沒有axios:axios.get(url, {})的代碼去除,使用res.json({})

三,發送配置post

舊版dev-server.js:

vue更新後删除了dev-server.js,背景資料模拟或開發本地請求本地資料配置在webpack.dev.conf.js

新版webpack.dev.conf.js:

在devServer的裡面:

vue更新後删除了dev-server.js,背景資料模拟或開發本地請求本地資料配置在webpack.dev.conf.js

ps:若這裡沒有axios:axios.get(url, {})的代碼去除,使用res.json({})

在元件裡面:

created () {
 this.$http.post('http://localhost:8080/api/postDiscList/user').then((response) => {
  console.log(response)
 })
}