關於新版vue-cli安裝json-server在build文件里沒生成出dev-server文件


今天在安裝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

})


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM