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

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的文件信息和数据
})

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

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

Vue3 ,可以使用 `axios` 或 `fetch` 等 HTTP 请求库来读取本地 JSON 文件。 以 `axios` 为例,首先需要安装 `axios`: ``` npm install axios --save ``` 然后在需要读取 JSON 文件的组件,引入 `axios` 并发起 GET 请求: ```javascript import axios from 'axios' export default { data() { return { jsonData: null } }, created() { axios.get('/data.json') .then(response => { this.jsonData = response.data }) .catch(error => { console.log(error) }) } } ``` 在上述例子,`data.json` 是存放在项目根目录下的本地 JSON 文件。`axios.get()` 方法返回一个 Promise 对象,可以使用 `.then()` 处理请求成功的响应结果,使用 `.catch()` 处理请求失败的情况。在成功的情况下,将响应结果赋值给组件的 `jsonData` 数据项。 需要注意的是,在开发环境下,读取本地 JSON 文件的路径为相对于开发服务器的根目录的相对路径,例如 `/data.json` 表示根目录下的 `data.json` 文件。在生产环境下,读取本地 JSON 文件需要使用绝对路径,或者将 JSON 文件打包到静态资源。 另外,还可以使用 `fetch` 发起 HTTP 请求,例如: ```javascript import jsonFile from './data.json' export default { data() { return { jsonData: null } }, created() { fetch(jsonFile) .then(response => { return response.json() }) .then(data => { this.jsonData = data }) .catch(error => { console.log(error) }) } } ``` 在上述例子,`data.json` 是通过 `import` 引入的本地 JSON 文件,使用 `fetch()` 方法发起 GET 请求,并使用 `.then()` 处理请求成功的响应结果,使用 `.catch()` 处理请求失败的情况。在成功的情况下,将响应结果赋值给组件的 `jsonData` 数据项。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值