vue3+vite加载本地js/json文件不能使用require浅析
更新时间：2023年07月27日 16:22:41 作者：jenesBangBang
这篇文章主要给大家介绍了关于vue3+vite加载本地js/json文件不能使用require的相关资料,require 是属于 Webpack 的方法,在v3+vite的项目里面并不适用,需要的朋友可以参考下
vue3+vite项目不能通过require引入文件，因为require是webpack自己封装的方法，在vite中没有封装该方法所以在调用require时会报错。
初始化引入本地文件可直接通过import进行引入
import booksData from '@/data/zhouyi/yijing_yuanzhu/json/data.json';
如果需要动态引入，则需要通过axios进行引入
安装axios：
npm install axios
注意：如果默认安装最新的axios，运行项目可能会报错（Cannot read property 'FormData' of undefined）然后页面空白，原因是axios 1.0之后版本会报错，解决方法就是降低版本。
先卸载
npm uninstall axios
安装指定版本
npm install axios@0.27.2 --save
将axios挂载在全局方便使用，在main.js中
import {
createSSRApp
} from 'vue'
import App from './App.vue'
import axios from "axios"
export function createApp() {
const app = createSSRApp(App)
// 挂载全局方法
app.config.globalProperties.$axios = axios
return {
app
}
}通过axios请求本地文件
const { proxy } = getCurrentInstance();
proxy.$axios.get('/data/zhouyi/yijing_yuanzhu/json/data.json').then(res => {
console.log(res);
});注意：import只能初始化就引入，如果需要通过条件动态引入，则需要使用axios；import引入文件路径前面有@，而axios请求路径不需要加@。
总结
到此这篇关于vue3+vite加载本地js/json文件不能使用require的文章就介绍到这了,更多相关vue3+vite加载本地js/json文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue实现折叠展开收缩动画,通过scrollHeight实现,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2023-11-11
这篇文章主要介绍了vue v-if未生效问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了前端vue3项目使用汉字转拼音几种解决方案,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2025-06-06
这篇文章主要介绍了如何使用xlsx库实现前端批量导入Excel文件的功能,包括使用FileReader读取文件、使用XLSX.read()方法解析Excel数据、验证表头格式和提取数据行,需要的朋友可以参考下2026-01-01
在本篇文章里我们给大家分享了关于vue的v-if使用方法的相关知识点，有兴趣的朋友们跟着学习下。2019-02-02
本文主要介绍了Vue3中watch监听器及源码学习,Watch侦听器在Vue3中特性进行了一些改变和优化,下面来详解的介绍一下基本使用,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
这篇文章主要给大家介绍了关于vue3如何通过ref获取元素离顶部的距离,文中通过代码以及图文介绍的非常详细,对大家学习或者使用vue3具有一定的参考借鉴价值,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了vue跳转外部链接的实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-06-06
这篇文章主要为大家详细介绍了vue实现树形表格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
发布-订阅模式是一种设计模式,通过事件中心实现对象间的解耦通信,在Vue中,Vue2使用Vue实例作为事件总线,Vue3推荐使用mitt库,发布-订阅模式适用于广播通知、解耦组件和复杂状态管理,在选择工具时,建议根据场景选择合适的工具2025-11-11
最新评论