vue加載本地json文件

背景：做地區跟行業級聯下拉選擇，因為想做成可以搜索的，所以必須一次加載數據，后台有做memcache緩存，但因為數據量大，還是比較費時間，所以做成本地文件，簡單記錄一下

 

准備數據，放到static下

 

修改build/webpack.dev.conf.js

加入如下代碼

// 加載json文件
const express = require('express')
const app = express()
let areaData = require('../static/data/area.json')
let industryData = require('../static/data/industry.json')
let apiRoutes = express.Router()
app.use('/api', apiRoutes)

 

然后再devServer加入如下代碼

    before(app) {
      app.get('/api/area', (req, res) => {
        res.json({
          data: areaData
        })
      })
      app.get('/api/industry', (req, res) => {
        res.json({
          data: industryData
        })
      })
    }

 

頁面發送的請求

//原請求發往后台
          this.$http.get(PreURL+'tree_area', {emulateJSON: true}).then(Response=>{
            this.areas = Response.data.data
            this.getIndustrys()
          })


//修改后直接走前端路由
          this.$http.get('/api/area', {emulateJSON: true}).then(Response=>{
            this.areas = Response.data.data
            this.getIndustrys()
          })

 

 

訪問速度ok

 

 

參考

Vue加載json文件