vue打包后，本地json数据获取失败

Question

在webpack.dev.conf.js中配置如下：

const express = require('express')

const app = express()

var appData = require('../recordEvent.json')

var apiRoutes = express.Router()

app.use('/api', apiRoutes)

devServer:{

.......

// 添加如下接口

before(app) {

  app.get('/api/record', (req, res) => {

    res.json({

      errno: 0,

      data: appData

    })

  })

}

}

配置完之后 通过 cnpm run dev可以正确获取到json

但cnpm run build 放到线上之后 获取json就报错了

是不是也需要在build环境中配置？？来大神告知一下啦！！！！！！

Answer 1

按照楼上的办法配置loader之后还是没有解决问题，不知道是不是我配置的问题。但是，如果把json文件当作静态文件放在static里，在组件直接require获取能得到数据，并且dev和build都是没问题。因为之前的写法是借鉴别人的，还是不知道这样配置的原因。

Answer 2

调试时可以使用，是因为run dev 命令走的是webpack.dev.conf.js，调试服务启动，并且将你的json挂载到这个服务上了，这时你修改的获取json数据的代码已经跑起来了，所以能使用。打包时不能使用，是因为打包操作并没有将你的json打包进来。其实vue打包只是将你的代码编译成html、js、css，而如果你需要将json打包至项目，需要在loader中配置。