Vue系列3 - 如何在vue中读取本地Json文件

西北码农

于 2018-11-23 15:49:25 发布

阅读量1.1w

点赞数

CC 4.0 BY-SA版权

分类专栏：大前端

本文链接：https://blog.youkuaiyun.com/bitree1/article/details/84395527

大前端专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了如何在Webpack配置文件中正确设置静态资源路径，通过修改webpack.base.conf.js中的resolve.alias部分，使得项目能够顺利引用静态目录下的资源，如properties.json文件。文中还提供了具体的代码示例和使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.修改webpack.base.conf.js 文件

在resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '/src': resolve('src'),
    '/libs': path.resolve(__dirname, '../src/libs'),
    '/static': resolve('static'),
  }
},

中添加'/static': resolve('static'),如上所示

修改后使用/static即可点位到static目录下

使用方法如下

$.ajax('/static/properties.json').then(res => {
  console.log("json数据为:" + res.body)//此处的res对象包含了json的文件信息和数据
})

将不定期更新资源，欢迎持续关注

想获得更多的学习知识请关注微信公众号：西北码农或扫下方二维码