今天在安裝json-server時遇到一個問題,build文件里並沒有生成dev-server.js文件,
開始是懷疑配置有問題,或者安裝不正確,然后重新安裝了兩三次,還是這樣,郁悶。。
通過查詢資料得知,新版的vue-cli取消了dev-server.js和dev-client.js 改用webpack.dev.conf.js代替,所以 配置本地訪問在webpack.dev.conf.js里配置即可
打開webpack.dev.conf.js,(在build目錄下),
在const portfinder = require(‘portfinder’)后添加以下兩行代碼
const appData = require('./db.json')//加載本地數據文件,這個db.json是你自己自定義新建的文件名,存放路徑隨你吧,我這里測試就放在build目錄里了,最后來解釋這個db.json
const seller = appData.seller//獲取對應的本地數據,
添加完以上代碼繼續在此文件里面向下查找devServer:{ }
在這個對象里添加配置,(不要刪除或覆蓋以前默認配置的值)
比如:(這里直接復制前輩的代碼了)
before(app) {
app.get('/api/seller', (req, res) => {
res.json({
errno:0,
data: seller
})
})
},
然后,問題來了,
1、我自己的json數據寫在哪里呢,是寫在我自己創建的db.json里面嗎,我去試了一下,沒用。。。尷尬!
2、按照上面的配置完了,瀏覽localhost:8080/api/seller刷新瀏覽器沒反應
3、localhost:8080/api/seller有反應了結果返回的{"erron":0}
解決
1.對於第一點的問題,經過自己反復測試,db.json里面必須有一對空的{},當然也可以寫點數據進去,雖然不報錯,但是也不知道有啥作用(本人小菜一枚,也沒過多的去研究),但是沒有{}肯定是要報錯的
2.對於第2點,瀏覽器沒反應的問題,一定要記住,當每更改過webpack.dev.conf.js這個文件或者db.json文件,記得重新 npm run dev
3.對於第3點,相信基本上的人已經看出來了,瀏覽器返回的{"erron":0}其實就是上面配置的
res.json({
errno:0,
data: seller
})
中的errno:0,那么就將他替換掉自己的json數據就行
res.json({
"getNewsList": [
{
"id": 1,
"title": "新聞條目1新聞條目1新聞條目1新聞條目1",
"url": "http://starcraft.com"
},
{
"id": 2,
"title": "新聞條目2新聞條目2新聞條目2新聞條目2",
"url": "http://warcraft.com"
},
{
"id": 3,
"title": "新聞條3新聞條3新聞條3",
"url": "http://overwatch.com"
},
{
"id": 4,
"title": "新聞條4廣告發布",
"url": "http://hearstone.com"
}
],
data: seller
})
完