原有

原來的vue-cli 在 vue init webpack 檔名之後，在build目錄下會生成dev-server.js檔案，可以在頁面請求本地資料的時候使用。但是最新版本的vue中，並沒有找到這兩個檔案。應該怎麼處理呢？

解決

雖然 dev-server.js 檔案沒有了，替換到了webpack.dev.conf.js 檔案裡面。我們可以在webpack.dev.conf.js裡面做相同的事

步驟

舊版dev-server.js配置本地資料訪問:

在const app = express()後，const compiler = webpack(webpackConfig)前配置就可以

var appData = require('../data.json')
var seller = appData.seller
var goods = appData.goods
var ratings = appData.ratings
var foods = appData.foods
var pice = appData.pice
var apiRoutes = express.Router()

apiRoutes.post('/test', function (req, res) {
  res.json({
    errno: 0,
    data:test
  });
})
app.use('/api',apiRoutes)
 

在新的檔案中

在const portfinder = require(‘portfinder’)後新增

//首先
const express = require('express')
const app = express()
var apiRoutes = express.Router()
app.use('/api', apiRoutes)

找到devServer,在裡面新增
before(app) {
  app.get('/api/test', (req, res) => {
    res.json({
      errno: 0,
      data: test
    })
  }),
}
 

就可以了

就像這樣子

注意

修改之後必須npm run dev才管用 注意哦