脚本宝典收集整理的这篇文章主要介绍了Vue 配置请求本地Json数据，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

build/webpack.dev.conf.js 文件里的修改

1. 在const portfinder = require('postfinder')后添加

   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)
   

2. 然后找到devServer，在他的里面插入一下代码：

   ITle="" data-original-title="复制">

   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
           })
       }),
       app.get('api/ratings',(reg,res) => {
           res.json({
               errno: 0,
               data: ratings
           })
       })
   }
   

3. 请求访问(.vue 文件里的调用)

   ES5的写法 this是undefined console.LOG(response); }) .catch(error => { console.log(error) console.log(this); })" title="" data-original-title="复制">

   this.$axios.get('/api/home', {
        params: {
            categoryId: categoryId
        }
   })
   .then(response => {     //这里要使用箭头函数，使用ES5的写法  this是undefined
       console.log(response);
    })
    .catch(error => {
        console.log(error)
        console.log(this);
    })

4. 最后重启项目即可 npm run dev

参考链接：https://my.oschina.net/lpcysz...

脚本宝典总结

以上是脚本宝典为你收集整理的Vue 配置请求本地Json数据全部内容，希望文章能够帮你解决Vue 配置请求本地Json数据所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。