Vue-cli3.0項目下axios請求本地json文件的數據

1. Vue-cli3.0項目節省了很多文件，比如講vue-cli3.0之前版本的build/dev-server.js配置放在了vue.config.js中。

2. 在Vue-cli3.0項目的vue.config.js或vue-cli3.0之前版本的build/dev-server.js中配置：

const express = require('express')
const app = express()

var singer = require('./src/db/data/singer.json') //本地json文件數據
var recommend=require('./src/db/data/recommend.json')

var apiRoutes = express.Router();
app.use('/api',apiRoutes)

module.exports = {
devServer:{
before(app) {
app.get('/api/singer', (req, res) => {
res.json({
errno: 0, // 這里是你的json內容
data: singer
})
})
app.get('/api/recommend', (req, res) => {
res.json({
errno: 0, // 這里是你的json內容
data: recommend
})
})
},
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
proxy: null //設置跨域，即將本文件內任何沒有匹配到的靜態文件，都指向跨域地址
},
}

3. 再組件內使用axios調用本地json文件數據：

import axios from 'axios' 

axios.get("/api/singer").then((data)=>{ 

console.log(data) 

})

注意：vue cli3.0 public 文件夾才是靜態資源文件,修改了vue.config.js需要重啟項目。