淺談vue-cli加載不到dev-server.js的解決辦法
更新時間：2017年11月24日 11:40:59 作者：魚是什么魚
本篇文章主要介紹了淺談vue-cli加載不到dev-server.js的解決辦法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
在使用vue開發(fā)過程中，難免需要去本地數(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ā)框架的實例
const app = express()
// 引用的json地址
var appData = require('../data.json')
// json某一個key
var goods = appData.result
var apiRoutes = express.Router()
app.use('/api', apiRoutes)
1. get請求配置
在 const portfinder = require('portfinder')后添加
#webpack.dev.conf.js
// 在devServer選項中添加以下內(nèi)容
before(app) {
app.get('/api/someApi', (req, res) => {
res.json({
// 這里是你的json內(nèi)容
})
})
}
注意： 修改配置文件完畢后，需要重新運行命令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)文章
這篇文章主要為大家詳細(xì)介紹了Vue組件之間的通信，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
用官網(wǎng)的一句話來說：Pinia?是?Vue的專屬狀態(tài)管理庫，Pinia就是為vue3而生。本文將通過一些示例詳細(xì)介紹一些Pinia的使用，希望對大家有所幫助2022-11-11
Vue.js學(xué)習(xí)筆記之 helloworld
vue是法語中視圖的意思，Vue.js是一個輕巧、高性能、可組件化的MVVM庫，同時擁有非常容易上手的API。有需要的小伙伴可以參考下2016-08-08
這篇文章主要介紹了vue彈窗里面使用echarts不顯示的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vue大屏自適應(yīng)的實現(xiàn)方法(cv就能用)
最近在用VUE寫大屏頁面,遇到屏幕自適應(yīng)問題,下面這篇文章主要給大家介紹了關(guān)于vue大屏自適應(yīng)的實現(xiàn)方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
本篇文章主要介紹了vue mint-ui源碼解析之loadmore組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章介紹了Vue項目中使用Bootstrap的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
Vue2 使用 Echarts 創(chuàng)建圖表實例代碼
本篇文章主要介紹了Vue2 使用 Echarts 創(chuàng)建圖表實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)購物車的基本功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
vue實現(xiàn)多組關(guān)鍵詞對應(yīng)高亮顯示功能
最近小編遇到這樣的問題，多組關(guān)鍵詞，這里實現(xiàn)了關(guān)鍵詞的背景色與匹配值的字體顏色值相同，下面通過定義關(guān)鍵詞匹配改變字體顏色，本文通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2019-07-07