vue構成要求ローカルjsonデータを手で教える

この文章は主に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     
  })//                       ：864305860
 }//        ，      

アクセスの要求

import header from <span class="hljs-string">'./components/header/header.vue'</span>
 
const ERR_OK = 0
 
<span class="hljs-built_in">export</span> default {
 <span class="hljs-function"><span class="hljs-title">data</span></span> () {
  <span class="hljs-built_in">return</span> {
   seller: {}
  }
 },
 <span class="hljs-function"><span class="hljs-title">created</span></span> () {
  this.<span class="hljs-variable">$http</span>.get(<span class="hljs-string">'/api/seller'</span>).then((response) => {
   response = response.body; //      
   <span class="hljs-keyword">if</span> (response.errno === ERR_OK) {
    this.seller = response.data;
    console.log(this.seller);
   }//                   ：864305860
  })//  1-3     
 },//        ，      
 components: {
  <span class="hljs-string">'v-header'</span>: header
 }
}

最後にプロジェクトを再起動するとnpm run dev結語にアクセスできます
ご覧いただき、ありがとうございます.不足点があれば、批判と指摘を歓迎します.
転載先:https://juejin.im/post/5c092169e51d451a5d7e7564