VUE3如何读取本地json文件

这篇具有很好参考价值的文章主要介绍了VUE3如何读取本地json文件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

首先需要安装axios

npm install axios --save

然后在main.js引用axios

import { createApp } from "vue";
import App from "./App.vue";

import axios from "axios"; // 安装axios后引入

const app = createApp(App);

app.config.globalProperties.$axios = axios; // 将axios挂载到原型上方便使用

app.mount("#app");

然后就可以使用$axios了,可是vue3没有this,所以需要用getCurrentInstance() 获取当前组件实例。

在app.vue里使用get请求数据

<script setup>
import { getCurrentInstance } from "vue";

const { proxy } = getCurrentInstance();

proxy.$axios.get("/public/XXXXXX.json").then((res) => {
  console.log(res);
});
</script>

当然,VUE3也可以直接读取本地json文件文章来源地址https://www.toymoban.com/news/detail-539845.html

import TestJson from "@/data/test_json.json";
console.log(TestJson);

到了这里,关于VUE3如何读取本地json文件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3引入.vue文件以及.ts文件时提示找不到模块

    1.找不到vue文件的,是因为ts无法解析我们的vue结尾的文件,所以需要在src目录下, 新建一个d.ts结尾的文件(可以叫env.d.ts) 然后里面这样写就可以 2,找不到ts文件就更正常了,我们需要在tsconfig.json里面进行配置(没有的话就新建一个,在根src同级的目录下面)。就直接复制就

    2024年02月11日
    浏览(55)
  • Vite+Vue3项目全局引入scss文件

    Sass 是世界上最成熟、最稳定、最强大的专业级CSS扩展语言!在日常项目开发过程中使用非常广泛,今天主要讲一下 Vite+Vue3 项目中该如何全局引入 scss 文件,引入混合 mixin 文件的不同配置。捎带说一下 Vue2 中的引入方式做一下简单的对比。 1.1 安装 vite 已经将 sass 预处理器的

    2024年02月06日
    浏览(38)
  • vue3 vite ts引入vue文件报错 ts(2307)

    vue3 vite ts 生成的项目模板,在ts文件中引入vue文件报错 ts(2307),只是ts报错,并不影响项目运行。 官方文档有说明:http://vue.dragonlm.com/guide/typescript/overview.html#ide-support 解决方法是安装插件,之后即可正常解析路径,并可以跳转到对应文件。 TypeScript Vue Plugin (Volar)

    2024年02月16日
    浏览(37)
  • Vue3.0中如何引入jQuery并使用

    终端使用 npm 命令安装 : 有的小伙伴可能项目结构不一样文件 名字会有点不一样 可能是.eslintrc.js文件,接下来我们在env中配置  jQuery:true 如果在没有的情况下,可以创建一个,一般情况下新建项目是自动生成的,然后如下进行配置: 但是个人爱好 一般使用 这是jQuery 的引

    2024年02月11日
    浏览(25)
  • Uni App + Vue3 引入高德小程序插件Js文件失败

      使用uni app模板开发微信小程序过程中引入高德地图小程序插件失败, 由于本人是第一次使用vue开发对vue2和3的模块引入方式并不甚了解,官方文档也并未提及所以踩了坑,特记录一下, 先看代码: 根据官方文档这里引入js插件后即可在onload函数实例化一个AMapWX对象 这里实

    2024年02月10日
    浏览(27)
  • Vue3:组合式函数(引入外部ts文件,修改外部ts参数)

            在 Vue 应用的概念中,“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用 有状态逻辑 的函数。更为复杂的业务逻辑可以使用store来处理         vue3中不在推荐使用mixins,在 Vue 2 中,mixins 是创建可重用组件逻辑的主要方式。尽管在 Vue 3 中保留

    2024年02月15日
    浏览(31)
  • vue3+ts import引入第三方js文件报错解决方法

    报错原因 :执行 import XXX from ‘XXX.js’ 报错,The requested module ‘xxx.js’ does not provide an export named ‘default’ 可能是第三方文件不支持模块化标准,不能按需导入 解决方案 : 第一种方法 : 在index.html里利用script全局引入 第二种方法 : 在所需的.vue文件里单独引入,最后在hea

    2024年02月16日
    浏览(34)
  • vue3项目打开本地pdf文件实现方法

    效果图 引入pdf插件 注意一定要这个版本,不然会报错 key.split(...).at is not a function pdf页面封装 pdf存放目录 具体实现就这么多,欢迎来吐槽! 结语 一个人久了连喜欢上一个人都好难,不要轻易地拒绝学习新知,因为你所拒绝的不是别人,而是你自己的成长之路。

    2024年02月12日
    浏览(35)
  • Vue3 - vite 引入本地图片方法,页面引入本地静态资源图像详细教程,解决 UI 前端组件库的图片属性无法使用本地图像问题(无论是本地开发还是打包部署,本地图片的路径正常可用)

    在 webpack 中通常用 require() 来引入静态图片,但在 vite 中这种方法就不行了。 本文实现了 在 vue3+vite 项目开发中,实现引入本地图片(静态资源),并且 build 打包后依然正常运行, 支持普通 img 标签使用,也支持 UI 组件库的各种 “图片属性” 当参数进行使用。 如下图所示

    2024年02月08日
    浏览(45)
  • vue3+vite在main.ts或者main.js文件中引入/App.vue报错(/App.vue不是模块)

    vue3报错提示 找不到模块“/App.vue”或其相应的类型声明 在使用 vue3➕vite➕ts 或者 js 搭建前端框架时,在 main.ts 或者 main.js 中引入 /App.vue 报错。报错内容为 /App.vue不是模块 。下面我们分 vue3+js 和 vue3+ts 两种情况讨论,给出相应的解决方案。 报错显示 : 报错原因 :javascrip

    2024年01月25日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包