vue加载本地json文件 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

 

 

参考