淺談vue-cli加載不到dev-server.js的解決辦法
更新時(shí)間：2017年11月24日 11:40:59 作者：魚是什么魚
本篇文章主要介紹了淺談vue-cli加載不到dev-server.js的解決辦法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
在使用vue開發(fā)過程中，難免需要去本地?cái)?shù)據(jù)地址進(jìn)行請求，而原版配置在dev-server.js中，新版vue-webpack-template已經(jīng)刪除dev-server.js，改用webpack.dev.conf.js代替，所以 配置本地訪問在webpack.dev.conf.js里配置即可。
#webpack.dev.conf.js
//首先
// nodejs開發(fā)框架express，用來簡化操作
const express = require('express')
// 創(chuàng)建node.js的express開發(fā)框架的實(shí)例
const app = express()
// 引用的json地址
var appData = require('../data.json')
// json某一個(gè)key
var goods = appData.result
var apiRoutes = express.Router()
app.use('/api', apiRoutes)
1. get請求配置
在 const portfinder = require('portfinder')后添加
#webpack.dev.conf.js
// 在devServer選項(xiàng)中添加以下內(nèi)容
before(app) {
app.get('/api/someApi', (req, res) => {
res.json({
// 這里是你的json內(nèi)容
})
})
}
注意： 修改配置文件完畢后，需要重新運(yùn)行命令npm run dev即可。
2. post請求配置。
如果要配置post請求，需要在該文件夾配置如下:
#webpack.dev.conf.js
apiRoutes.post('/foods', function (req, res) { //注意這里改為post就可以了
res.json({
error: 0,
data: foods
});
})
// 在組件里面
#...vue
created () {
this.$http.post('http://localhost:8080/api/foods').then((res) => {
console.log(res)
})
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
vue3項(xiàng)目如何使用prettier格式化代碼
這篇文章主要介紹了vue3項(xiàng)目如何使用prettier格式化代碼問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
在vue項(xiàng)目中添加高德地圖,對開發(fā)地圖的開發(fā)人員有一定幫助,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中使用高德地圖的超詳細(xì)步驟,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
Element框架el-tab點(diǎn)擊標(biāo)簽頁時(shí)再渲染問題的解決
本文主要介紹了Element框架el-tab點(diǎn)擊標(biāo)簽頁時(shí)再渲染問題的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章介紹了Vue.js中v-show和v-if指令的用法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
這篇文章主要為大家詳細(xì)介紹了vue+echart實(shí)現(xiàn)雙柱狀圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
詳解Vue-cli來構(gòu)建Vue項(xiàng)目的步驟
這篇文章主要為大家介紹了Vue-cli來構(gòu)建Vue項(xiàng)目的步驟，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
Vue.js watch監(jiān)視屬性知識(shí)點(diǎn)總結(jié)
在本篇文章里小編給大家分享的是關(guān)于Vue.js watch監(jiān)視屬性的相關(guān)知識(shí)點(diǎn)內(nèi)容，需要的朋友們學(xué)習(xí)下。2019-11-11
這篇文章主要介紹了vue中v-model雙向綁定input輸入框問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要給大家分享了 vue中install方法介紹，vue提供install可供我們開發(fā)新的插件及全局注冊組件等，感興趣的小伙伴請和小編一起進(jìn)入文章了解具體內(nèi)容吧2021-11-11
vue是一種輕巧便捷的框架，那么如何進(jìn)行對于數(shù)據(jù)加載的刷新呢？以下就是我對于vue.js數(shù)據(jù)加載的一點(diǎn)想法2017-06-06