vue3+vite加載本地js/json文件不能使用require淺析
更新時間：2023年07月27日 16:22:41 作者：jenesBangBang
這篇文章主要給大家介紹了關(guān)于vue3+vite加載本地js/json文件不能使用require的相關(guān)資料,require 是屬于 Webpack 的方法,在v3+vite的項目里面并不適用,需要的朋友可以參考下
vue3+vite項目不能通過require引入文件，因為require是webpack自己封裝的方法，在vite中沒有封裝該方法所以在調(diào)用require時會報錯。
初始化引入本地文件可直接通過import進(jìn)行引入
import booksData from '@/data/zhouyi/yijing_yuanzhu/json/data.json';
如果需要動態(tài)引入，則需要通過axios進(jìn)行引入
安裝axios：
npm install axios
注意：如果默認(rèn)安裝最新的axios，運(yùn)行項目可能會報錯（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只能初始化就引入，如果需要通過條件動態(tài)引入，則需要使用axios；import引入文件路徑前面有@，而axios請求路徑不需要加@。
總結(jié)
到此這篇關(guān)于vue3+vite加載本地js/json文件不能使用require的文章就介紹到這了,更多相關(guān)vue3+vite加載本地js/json文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue實現(xiàn)折疊展開收縮動畫,通過scrollHeight實現(xiàn),本文通過實例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2023-11-11
這篇文章主要介紹了vue?v-if未生效問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了前端vue3項目使用漢字轉(zhuǎn)拼音幾種解決方案,文中通過代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2025-06-06
這篇文章主要介紹了如何使用xlsx庫實現(xiàn)前端批量導(dǎo)入Excel文件的功能,包括使用FileReader讀取文件、使用XLSX.read()方法解析Excel數(shù)據(jù)、驗證表頭格式和提取數(shù)據(jù)行,需要的朋友可以參考下2026-01-01
在本篇文章里我們給大家分享了關(guān)于vue的v-if使用方法的相關(guān)知識點，有興趣的朋友們跟著學(xué)習(xí)下。2019-02-02
Vue3中watch監(jiān)聽器及源碼學(xué)習(xí)
本文主要介紹了Vue3中watch監(jiān)聽器及源碼學(xué)習(xí),Watch偵聽器在Vue3中特性進(jìn)行了一些改變和優(yōu)化,下面來詳解的介紹一下基本使用,具有一定的參考價值,感興趣的可以了解一下2024-01-01
這篇文章主要給大家介紹了關(guān)于vue3如何通過ref獲取元素離頂部的距離,文中通過代碼以及圖文介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue3具有一定的參考借鑒價值,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了vue跳轉(zhuǎn)外部鏈接的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-06-06
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)樹形表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
發(fā)布-訂閱模式是一種設(shè)計模式,通過事件中心實現(xiàn)對象間的解耦通信,在Vue中,Vue2使用Vue實例作為事件總線,Vue3推薦使用mitt庫,發(fā)布-訂閱模式適用于廣播通知、解耦組件和復(fù)雜狀態(tài)管理,在選擇工具時,建議根據(jù)場景選擇合適的工具2025-11-11