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如何进行数据代理,通过本文学习我们了解如何代理的及验证两条线的问题，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-10-10
这篇文章主要为大家详细介绍了vue实现树形表格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了在浏览器console中如何调用vue内部方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要介绍了Nuxt页面级缓存的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
elementPlus 的el-select在提示框关闭时自动弹出的问题解决
这篇文章主要介绍了elementPlus 的el-select在提示框关闭时自动弹出闭时自动弹出的问题,主要问题就是因为filterable属性,根本解决方案是选中的时候让他失去焦点 el-select有一个visible-change事件,下拉框出现/隐藏时触发,感兴趣的朋友跟随小编一起看看吧2024-01-01
最近项目更新频繁,每次一更新客户都说还跟之前的一样,一查原因是因为客户没有清空浏览器的缓存,所以为了方便客户看到最新版本,开始调研再发布新版本后自动清理缓存,这篇文章主要给大家介绍了关于Vue项目每次发版后要清理浏览器缓存问题的解决办法,需要的朋友可以参考下2024-02-02
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
这篇文章主要介绍了vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要给大家介绍了如何使用 Vue3 实现一个穿梭框效果,当选中数据,并且点击相对应的方向箭头时,选中的数据会发送到对面,并且数据会保持正确的顺序进行排列,文中有详细的代码讲解,具有一定的参考价值,需要的朋友可以参考下2023-12-12
对Vue beforeRouteEnter 的next执行时机详解
今天小编就为大家分享一篇对Vue beforeRouteEnter 的next执行时机详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了Vue2.0结合webuploader实现文件分片上传功能，非常不错，具有参考借鉴价值,需要的朋友可以参考下2018-03-03
最新评论