本篇文章主要介紹了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.goodsconst ratings = appData.ratingsconst 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 = 0export 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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
