本篇文章主要介紹了vue配置請求本地json數據的方法,分享給大家,具體如下:
在build文件夾下找到webpack.dev.conf.js文件,在const portfinder = require('portfinder')后添加
const express = require('express') const app = express() const appData = require('../data.json') // 加載本地json文件 const seller = appData.seller // 獲取對應本地數據 const goods = appData.goods const ratings = appData.ratings const apiRoutes = express.Router() app.use('/api',apiRoutes)
然后找到devServer,插入以下代碼:
//然后找到devSeerver,在里面添加 before (app) { app.get('/api/seller',(reg,res) => { res.json({ errno: 0, data: seller }) // 接口返回json數據,上面配置的數據seller就復制給data請求后調用 }), app.get('/api/goods',(reg,res) => { res.json({ errno: 0, data: goods }) // 接口返回json數據,上面配置的數據goods就復制給data請求后調用 }), app.get('/api/ratings',(reg,res) => { res.json({ errno: 0, data: ratings }) // 接口返回json數據,上面配置的數據ratings就復制給data請求后調用 }) }
請求訪問
<script> import header from './components/header/header.vue' const ERR_OK = 0 export default { data () { return { seller: {} } }, created () { this.$http.get('/api/seller').then((response) => { response = response.body; // 獲取到數據 if (response.errno === ERR_OK) { this.seller = response.data; console.log(this.seller); } }) }, components: { 'v-header': header } } </script>
最后重新啟動項目即可訪問npm run dev
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com