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文件