快捷導(dǎo)航

vue引用json文件的方法小結(jié)

更新時(shí)間：2022年09月21日 09:58:42 作者：懶啦

這篇文章主要介紹了vue引用json文件,解決怎么從控制臺(tái)把數(shù)據(jù)移到j(luò)son文件中，只需要直接右擊復(fù)制值即可，需要的朋友可以參考下

相信大家都有被后端數(shù)據(jù)支配過(guò) 廢話不多說(shuō) 直接上代碼

1.解決怎么從控制臺(tái)把數(shù)據(jù) 移到j(luò)son文件中直接右擊復(fù)制值

在這里插入圖片描述

var getData = require("./taifeng.json"); // 直接引入json文件
console.log(getData);

vue中引用Json文件

我們用import引用文件的時(shí)候，被引用的文件都會(huì)用export暴漏，比如js，而有一些文件不需要暴漏，如Json、img（圖片）、css;

import 引用Json文件

import aaaa from "./a.json"
//aaaa是變量，可以隨便命名

完成！沒(méi)想到吧就是這么簡(jiǎn)單我在網(wǎng)上搜到的都是使用axios來(lái)進(jìn)行轉(zhuǎn)換那個(gè)對(duì)于我這個(gè)腦袋不太好使的人屬實(shí)不友好所以還是這個(gè)簡(jiǎn)單高效完美！

Vue 中引入 json 的三種方法

json的定義：

JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式。
JSON 是 JS 對(duì)象的字符串表示法，它使用文本表示一個(gè) JS 對(duì)象的信息，本質(zhì)是一個(gè)字符串。

1.require-運(yùn)行時(shí)加載

test.json文件

{
  "testData": "hello world",
  "testArray": [1,2,3,4,5,6],
  "testObj": {
    "name": "tom",
    "age": 18
  }
}

// require引用：
mounted() {
    // require引用時(shí)，放src和放statci都可以，建議放static
    const testJson = require('../../static/json/test.json');
    const {testData, testArray, testObj} = testJson;
    console.log('testData',testData);
    // ‘hello world'
    console.log('testArray',testArray);
    // [1,2,3,4,5,6]
    console.log('testObj',testObj);
}

2.import-編譯時(shí)輸出接口

// import 引用
// import引用時(shí)，放src和放statci都可以，建議放static
import testImportJson from '../../static/json/test.json'
// import testImportJson from './json/test.json'
export default {
  data(){
    return{
      testImportJson  
    }
  },
  mounted() {
    const {testData, testArray, testObj} = this.testImportJson;
  }
}

3. 通過(guò)http請(qǐng)求獲取

// http引用
methods:{
  async jsonHttpTest(){
    const res = await this.$http.get('http://localhost:8080/static/json/test.json');
    // 放在src中的文件都會(huì)被webpack根據(jù)依賴編譯，無(wú)法作為路徑使用，static中的文件才可以作為路徑用
    const {testData, testArray, testObj} = res.data;
  }
},
mounted() {
  this.jsonHttpTest();
},

參考鏈接：https://www.jianshu.com/p/6839ffe69338

到此這篇關(guān)于vue引用json文件的文章就介紹到這了,更多相關(guān)vue引用json文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue
json

相關(guān)文章

解決Vue2跨域報(bào)錯(cuò)AxiosError?net::ERR_FAILED、?Network?Error、ERR_N
這篇文章主要給大家介紹了關(guān)于解決Vue2跨域報(bào)錯(cuò)AxiosError?net::ERR_FAILED、?Network?Error、ERR_NETWORK的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
Vue3+Vite項(xiàng)目中引入pinia和pinia-plugin-persistedstate的方法代碼
這篇文章主要給大家介紹了關(guān)于Vue3+Vite項(xiàng)目中引入pinia和pinia-plugin-persistedstate的相關(guān)資料,Pinia是Vue.js的官方狀態(tài)管理庫(kù),輕量且功能強(qiáng)大,支持模塊化和TypeScript,PiniaPluginPersistedState是一個(gè)插件,需要的朋友可以參考下
2024-11-11
vue-router路由懶加載和權(quán)限控制詳解
這篇文章主要介紹了vue-router路由懶加載和權(quán)限控制的相關(guān)資料
2017-12-12
element-ui使用el-date-picker日期組件常見(jiàn)場(chǎng)景分析
最近一直在使用 element-ui中的日期組件,所以想對(duì)日期組件常用的做一個(gè)簡(jiǎn)單的總結(jié),對(duì)element-ui el-date-picker日期組件使用場(chǎng)景分析感興趣的朋友一起看看吧
2024-05-05
Vue-cli3簡(jiǎn)單使用(圖文步驟)
這篇文章主要介紹了Vue-cli3簡(jiǎn)單使用(圖文步驟)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-04-04
如何使用vue3打造一個(gè)物料庫(kù)
這篇文章主要介紹了如何使用vue3打造一個(gè)物料庫(kù)，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下
2021-05-05
vue3實(shí)現(xiàn)H5表單驗(yàn)證組件的示例
本文主要介紹了vue3實(shí)現(xiàn)H5表單驗(yàn)證組件的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
Vue將將后端返回的list數(shù)據(jù)轉(zhuǎn)化為樹結(jié)構(gòu)的實(shí)現(xiàn)
本文主要介紹了Vue將將后端返回的list數(shù)據(jù)轉(zhuǎn)化為樹結(jié)構(gòu)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-05-05
解決vant中 tab欄遇到的坑 van-tabs
這篇文章主要介紹了解決vant中 tab欄遇到的坑 van-tabs，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
vue中axios封裝使用的完整教程
這篇文章主要給大家介紹了關(guān)于vue中axios封裝使用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03