vue3+vite加载本地js/json文件不能使用require浅析

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文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！